平滑滾動不起作用

Question

我想這樣做，當你點擊鏈接滾動順利上移。但不知何故setTimeout不起作用。下面的代碼：

window.onscroll = function(e) { 
    var a = document.getElementsByTagName('a')[0]; 
    a.style.opacity = (window.pageYOffset > document.documentElement.clientHeight) ? 1 : 0; 
} 

document.getElementsByTagName('a')[0].onclick = top; 

function top() { 
    if(window.pageYOffset != 0){ 
     window.scrollBy(0, -10); 
     setTimeout(top, 100); 
    } 
} 

鏈接到沙箱：http://jsfiddle.net/b7by1so8/

Answer 1

由於icktoofay回答，你必須使用preventDefault取消鏈接的默認行爲。

如果用戶滾動，您可能還想停止動畫。爲此，您可以在每次更改滾動條時保存滾動位置，如果下次不匹配，則必須停止動畫。

下面是一個例子：http://jsfiddle.net/BaliBalo/b7by1so8/1/

在本琴說，你也可以使用一個decelarating速度通過一個「略少至1」的個數multiplicating scrollTop的，而不是僅僅遞減把事情少線性它。

Answer 2

在點擊與# A HREF鏈接的默認操作是使用戶對頁面的頂部。由於您沒有在該事件中致電preventDefault，因此瀏覽器會繼續執行此操作。你可能想阻止它，所以你可以自己做：

function top(e) { 
    if(e) e.preventDefault(); 
    // ... 
}