Question

我知道如何使用此代码点击按钮时跳转到页面顶部：

 document.body.scrollTop =document.documentElement.scrollTop = 0;

当前滚动位置大于指定数字（例如500）时，如何跳到页面顶部？

我想要一个不依赖于jQuery的解决方案。

Answer 1

要重复运行代码，您需要使用计时器（请参阅setInterval()）或每次发生事件时发生的事件处理程序。在这种情况下，您希望每次页面滚动时检查它是否已经过了某个点。此功能由onscroll event提供。

＆＃13;

function scrollCheck() {
    if(document.documentElement.scrollTop > 120) {
         document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}
if(window.addEventListener) {
    window.addEventListener ("scroll", scrollCheck, false);
} else {
    window.attachEvent("onscroll", scrollCheck);
}

＆＃13;

aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />
aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />
aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />
aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />
aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa

＆＃13;

Answer 2

当前滚动位置的位置并不重要。

我发现当document.documentElement不存在时您可能会收到错误。

试试此代码

var body = (document.documentElement && document.documentElement.scrollTop)?document.documentElement:document.body;

body.scrollTop = 0;

我在JSBin上制作了一个花哨的版本。

http://jsbin.com/qaqeqexaju/3/

<div style="height:3000px;">
  <button id="btnToTop" style="margin-top:2990px;">button</button>
</div>
<script>


function scrollToTop(){
    var body = (document.documentElement && document.documentElement.scrollTop)?document.documentElement:document.body;
    scrollTo(body, 0, 1250);   
    return false;
}

function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;

    var animateScroll = function(){        
        currentTime += increment;
        var val = Math.easeOutQuad(currentTime, start, change, duration);                        
        element.scrollTop = val; 
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
};
Math.easeOutQuad = function (t, b, c, d) {
    t /= d;
    return -c * t*(t-2) + b;
}
document.getElementById("btnToTop").onclick = scrollToTop;

</script>

Javascript跳转到页面顶部

2 个答案: