快速回到顶部

Posted 莫问、前程

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了快速回到顶部相关的知识,希望对你有一定的参考价值。

如何实现快速回到顶部的方法?只需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 );
}

  

 

以上是关于快速回到顶部的主要内容,如果未能解决你的问题,请参考以下文章

css 回到顶部的片段

快速回到顶部

rest_framework

Django rest_framewok框架的基本组件

表格怎么快速回到第一行

JavaScript---快速回到页面顶部