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

      

  • 相关阅读:
    windows 保留7天的文件
    同步
    bytes数据类型的转码问题:
    hashlib,logging,configparser模块
    面向对象 ---封装
    面向对象 -----多态
    面向对象 ---继承
    面向对象的命名空间与组合
    常用模块:
    匿名函数:
  • 原文地址:https://www.cnblogs.com/intangible/p/7576321.html
Copyright © 2011-2022 走看看