zoukankan      html  css  js  c++  java
  • 原生javascript实现回到顶部平滑滚动

    function rt() {

        var d = document,

            dd = document.documentElement,

            db = document.body,

            top = dd.scrollTop || db.scrollTop,

            step = Math.floor(top / 20);

           (function() {

               top -= step;

               if (top > -step) {

                   dd.scrollTop == 0 ? db.scrollTop = top: dd.scrollTop = top;

                   setTimeout(arguments.callee, 20);

               }

           })();

    }

    什么是document.body?

    返回html dom中的body节点 即<body>

    什么是 document.documentElement?

    返回html dom中的root 节点 即<html>

    在chrome(版本 52.0.2743.116 m)下获取scrollTop只能通过document.body.scrollTop,而且DOCTYPE是否存在,不会影响 document.body.scrollTop的获取。

    在firefox(47.0)页面存在DOCTYPE,使用document.documentElement.scrollTop获取滚动条距离;页面不存在DOCTYPE,使用document.body.scrollTop 获取滚动条距离

    在IE(11.3),页面存在DOCTYPE,使用document.documentEelement.scrollTop获取滚动条距离,页面不存在DOCTYPE,使用document.documentElement.scrollTop 或 document.body.scrollTop都可以获取到滚动条距离

    兼容解决方案:

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  • 相关阅读:
    RestTemplateConfig写法,用于配置Template引擎模板
    RedisUtil写法,好用
    ftpUtil写法,记录一下
    生成唯一id写法,雪花算法
    base64编码转图片,图片转base64编码
    MultipartFile上传图片的写法,记录一下。
    httpClientUtil的put请求
    httpClientUtil的post请求
    python time和datetime
    ubuntu16.04TLS软件源update
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/9511434.html
Copyright © 2011-2022 走看看