HTML錨加Javascript腳本滾動

我有一個可怕的時間編碼應該是一個非常簡單的序列。當我點擊「轉到第2部分」時，我希望它轉到錨點，然後垂直滾動給定量（這裏是50px）。所以，會發生什麼，它會將錨點放在頁面頂部，但它不會執行額外的調整滾動。爲了看到這一點，你必須用很多文字填充兩個段落塊。HTML錨加Javascript腳本滾動

<html> 
    <head> 
     <script> 
      function scrollxy(dx,dy) { 
       window.scrollBy(dx,dy); 
      } 
     </script> 
    </head> 
    <body> 
     <p><a href="#anchor2" onClick="scrollxy(0,-50);">Go to Section 2</a></p> 
     <h2>Section 1</h2> 
     <p>Lots of text ...</p> 
     <a id="anchor2"></a> 
     <h2>Section 2</h2> 
     <p>Lots of text ...</p> 
    </body> 
</html>

來源

2015-02-24 Almiron

使用超時爲「scrollxy」功能嘗試...可能發生的事情是它同時在做兩件事。 – 2015-02-24 16:55:21

的問題是，你的onClick功能被錨滾動之前調用了下來。你必須dalay爲了腳本執行把它的工作：

 function scrollxy(dx,dy) { 
      setTimeout(function() { 
       window.scrollBy(dx,dy); 
      }, 10); 
     }

而且

<p><a href="#anchor2" onClick="scrollxy(0,50);">Go to Section 2</a></p>

這裏是一個FIDDLE

來源

2015-02-24 17:10:06 nanndoj

謝謝，Nanndoj！增加10毫秒的時間延遲解決了這個問題。但是，我有一個問題需要注意：爲什麼函數定義必須位於setTimeout定義中。爲什麼當我按照下面的方式編寫它時，滾動功能不起作用，這在直觀和概念上更清潔？函數scrollxy（dx，dy）{ \t window.scrollBy（dx，dy）; \t window.setTimeout（「scrollxy（）」，10） } – Almiron 2015-02-25 14:50:41

例如：想象一下滾動位於位置0，錨點位於500.單擊函數'scrollxy'將首先執行（到位置50），然後瀏覽器將執行默認錨點行爲（轉到錨點位置500）。當我們用'setTimeout'延遲執行時，默認的瀏覽器行爲將被執行（到位置500），然後'scrolxy'將在稍後被調用（到位置550） – nanndoj 2015-02-25 14:53:55

我想這個提琴可以回答你評論中的問題http： //jsfiddle.net/j9xy5v1g/ – nanndoj 2015-02-25 15:06:19

HTML錨加Javascript腳本滾動

回答

相關問題