原生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;

 

posted on 2018-08-21 15:05  ranyonsue  阅读(994)  评论(0编辑  收藏  举报

导航