zoukankan      html  css  js  c++  java
  • 快速回到顶部

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

      

  • 相关阅读:
    手机体验细节小动画
    第一次用AngularJS
    鼠标离开方向检测
    回忆之placeholder
    回忆之日历
    大数据学习
    shell 二
    十三:变量、函数、存储过程、循环控制结构
    十二:事务与视图
    十一:约束
  • 原文地址:https://www.cnblogs.com/intangible/p/7576321.html
Copyright © 2011-2022 走看看