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”的数字而不是仅仅递减它来使用去模拟速度来减少线性。

平滑滚动不起作用

2 个答案: