快速回到顶部

Posted 2020-10-08 莫问、前程

如何实现快速回到顶部的方法？只需scrollTop = 0，即可实现。如下

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

 将该行代码插入到相应的事件，即可点击实现点击返回顶部。这个是没什么问题的。

然鹅，当我们执行该操作的时候，会发现一个问题——页面立马回到顶部了，这样给用户的体验是极其糟糕的。我们需要给它加一个动画，就可以了。

JQuery代码如下：

$("html,body").animate({
    scrollTop: 0
},800)

javascript原生代码如下：

方法一： scrollTo()方法

function backTop() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
    speed = 33,
    returnTopOnce = function(){
        if( scrollTop > speed ){
            window.scrollTo(0, scrollTop);
            scrollTop -= speed;
            return;
        }
        clearInterval(timer);
        window.scrollTo(0, 0);
    },

    timer = setInterval(returnTopOnce, 1000/60 );
} 

方法二： 

function backTop() {
    returnTopOnce = function () {
        var top = document.body.scrollTop+document.documentElement.scrollTop,
            speed = top/5;
    
        if(document.body.scrollTop){
            document.body.scrollTop -= speed;
        } else{
            document.documentElement.scrollTop -= speed;
        }

        if(top == 0){
            clearInterval(timer);
        }
    };
    timer = setInterval( returnTopOnce, 30 );
}