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. (6)Jquery1.8.3快速入门_过滤选择器

    一.Jquery的基本过滤选择器: 基本过滤选择器: 1. :first 选取第一个元素 2. :last 选取最后一个元素 3.:not(selector) 去除所有与给定的选择器匹配的元素 4.: ...

  2. MyBatis：Pagehelper分页

    对于分页插件这里选择查询所有用户的信息,以列表返回 前端只需输入分页数的数据既可 service实现类也很方便,甚至我都开始有点喜欢上这种Example的SQL形式了. 最后页面调用url的json信 ...

  3. Java并发编程学习：线程安全与锁优化

    本文参考<深入理解java虚拟机第二版> 一.什么是线程安全? 这里我借<Java Concurrency In Practice>里面的话:当多个线程访问一个对象,如果不考虑 ...

  4. js 冒泡排序、快速排序、去重、查找字符串最多值（面试常有）

    冒泡排序 var bubbleSort = function(arr) { for (var i = 0; i < arr.length-1; i++) { for (var j = i+1; ...

  5. js截图及绕过服务器图片保存至本地（html2canvas）

    今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...

  6. iOS中时间与时间戳的相互转化

    //获取当前系统时间的时间戳 #pragma mark - 获取当前时间的 时间戳 +(NSInteger)getNowTimestamp{ NSDateFormatter *formatter = ...

  7. 关于相机拍照获取图片onActivityResult返回data 为null的问题

    调用相机拍摄方法 /** * capture new image */ protected void selectPicFromCamera() { if (!EaseCommonUtils.isSd ...

  8. Android为TV端助力 关于JNI的使用方法

    1首先在java里面定义你需要的native方法 2打开cmd,进入doc窗口,如果是android项目就进入到你当前项目的bin目录下,在doc里面输入cd E:\workspace\Test1 也 ...

  9. VMWare上的ubuntu系统安装VMWare Tools（图文）

    一.启动vm,点击这里安装 二.将文件复制到桌面 三.在终端用命令,把文件解压到桌面 四.执行安装命令  sudo ./vmware-install.pl 五.效果图

  10. Java的关键字

    下面列出Java关键字.这些保留字不能用于常量.变量和任标识示字符的名称 没事儿时多背背,对你没有坏处哒! 类别 关键字 说明 访问控制 private 私有的 protected 受保护的 publ ...