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;

原生javascript实现回到顶部平滑滚动的更多相关文章

  1. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  2. JavaScript实现回到顶部

    HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...

  3. Javascript做图片无缝平滑滚动

    因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  4. 原生js实现回到顶部

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  5. 原生JS实现返回顶部和滚动锚点

    ;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...

  6. jq与js的写法，示例回到顶部div滚动显示隐藏

    jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...

  7. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  8. 原生JavaScript技巧大收集100个

    原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var p ...

  9. 100个常用的原生JavaScript函数

    1.原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) {    var temp;    var icount = 0;    var ...

随机推荐

  1. C- unsigned :1之位域分析

    1.首先回忆结构体 我们都知道定义一个结构体可以这样的方式定义: struct Point { float x; float y; } point; //等价于: struct Point point ...

  2. js操作css样式，null和undefined的区别？

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  3. 给大家带来一些 horm的一些知识！

    1. form action 提交地址     https://www.baidu.com merhod 提交 方式post get get是在http的url上提交不加密 post加密在http 中 ...

  4. cloudera manager 安装配置

    前面cloudera manager 环境准备和安装我参考的是: https://blog.csdn.net/m0_38017084/article/details/82218559 这篇博客,写的非 ...

  5. 洛谷P2866 [USACO06NOV]糟糕的一天Bad Hair Day(单调栈)

    题目描述 Some of Farmer John's N cows (1 ≤ N ≤ 80,000) are having a bad hair day! Since each cow is self ...

  6. loadrunner 脚本优化-集合点设置

    脚本优化-集合点设置 by:授客 QQ:1033553122 添加集合点(Insert->Rendezvous) 当一个集合点被插入,VuGen往Vuser脚本中插入一个lr_rendezvou ...

  7. Ubuntu下解压缩文件

    记录Ubuntu下各种压缩和解压方式: .tar解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)—————— ...

  8. ubuntu12.0.4开启root用户登陆

    1.命令:sudo passwd root 为root分配密码,按提示进行设置就好. 2.打开终端,输入以下命令: sudo -s 进入root账户下: cd /etc/lightdm       g ...

  9. Android性能优化问题总结

    性能优化这块,分为UI性能优化.内存优化.数据库优化.网络优化.耗电优化等等.可以从1.如何发现问题,2.怎么解决问题,3.解决效果对比,这几个方面去描述.举个简单例子——UI优化,可以从 UI出现什 ...

  10. 将html前端代码提取公因数（5）

    将html前端代码提取公因数(5) 注意:这是优化html代码,对于多个html代码相同的部分提取到一个模板中,只需要编写变化的html 1,利用Django提供的render方法的第三个参数的属性 ...