平滑滚动不起作用

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(); 
    // ... 
}