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. springMVC常见错误-解决org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.spring

    笔者参考文档: https://blog.csdn.net/sinat_24928447/article/details/47807105 可能错误原因即解决方法: 1.配置文件错误 a)这是配置文件 ...

  2. JSJ——java基本概念二

    当Java虚拟机启动执行时,它会寻找你在命令列所指定的类.每个Java程序最少都会有一个类以及一个main().每个应用程序只有一个main()函数.然后它会锁定像下面这样一个特定的方法: publi ...

  3. Python 语法笔记

    1.else与while结合 while a>0: pass else: pass #当a<=0时执行 2.with语法,无需关闭文件,python自动关闭 with open('a.tx ...

  4. 学linux,从Ubuntu开始

    1.安装过程出现0x00000000指令引用的0x00000000内存该内存不能为written 如果你安装的是inux系统 需要在设置-->系统--> 处理器--启用PAE支持我的就是这 ...

  5. 详解LSTM

    https://blog.csdn.net/class_brick/article/details/79311148 今天的内容有: LSTM 思路 LSTM 的前向计算 LSTM 的反向传播 关于调 ...

  6. 10.Odoo产品分析 (二) – 商业板块(5) –日历(1)

    查看Odoo产品分析系列--目录 日历模板也可以理解为一个日历视图,在分析"销售"模块的日历视图时做过介绍.在这里做一下详细的介绍:  从页面上,它横向分为两个部分,左边的80%显 ...

  7. android笔试题二

    1.android系统架构: Linux内核——标准库——Framework层——应用层 Linux层包括:Android系统的核心服务,硬件驱动,进程管理,系统安全等等 (现在又加了一层变成了:Li ...

  8. 2014/08/31 Zushi

    今天是逗子森户海滨浴场开放的最后一天,趁着最后的光景来这里透透气. 在学皮划艇准备下海的人们,貌似还挺有趣. 来自云端的上帝之手. 谁愿意和我一起向着夕阳弄桨. 夕阳西下,那里是家乡的方向. 灯塔和神 ...

  9. 乱码问题-页面跳转方式-Servlet配置文件

    1.HttpServletRequest a)HttpServletRequest是一个接口,继承了ServletRequest接口: b)HttpServletRequest对象由服务器创建,并作为 ...

  10. Spring Data Redis 让 NoSQL 快如闪电 (1)

    [编者按]本文作者为 Xinyu Liu,详细介绍了 Redis 的特性,并辅之以丰富的用例.在本文的第一部分,将重点概述 Redis 的方方面面.文章系国内 ITOM 管理平台 OneAPM 编译呈 ...