平滑滾動不起作用

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

單擊具有href值為#的鏈接時的默認操作是將用戶帶到頁面頂部。 由於您沒有在該事件上調用preventDefault ，因此瀏覽器將繼續執行該操作。 您可能想阻止它，以便自己進行：

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

Answer 2

正如icktoofay回答的那樣，您必須使用preventDefault來取消鏈接的默認行為。

更進一步，如果用戶已滾動，則可能還需要停止動畫。 為此，您可以在每次更改時保存滾動的位置，如果下次不匹配，則必須停止動畫。

這是一個示例： http : //jsfiddle.net/BaliBalo/b7by1so8/1/

就像在這個小提琴中所說的那樣，您還可以使用降級速度，通過將scrollTop乘以“略小於1”的數字而不是遞減來使線性度降低。