平滑滚动不起作用

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”的数字而不是递减来使线性度降低。