Javascript跳转到页面顶部

Javascript jump to top of page

本文关键字：顶部 Javascript      更新时间：2023-09-26

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

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

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

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

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

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);
}
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

您当前的滚动位置在哪里应该无关紧要。

我发现当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>
相关文章：