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. hihoCoder编程练习赛69

    题目1 : 偶数长度回文子串 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个小写字母字符串,请判断它是否有长度为偶数的非空连续回文子串 输入 输入包含多组数据. ...

  2. crontab命令行和日志查看

    1.基本命令行模式 注意:非root用户 systemctl restart crond 失效,请使用最底层的驱动重启 2.crontab日志 cron日志保存在系统目录/var/log/cron 命 ...

  3. K8S dashboard

    kubernetes-dashboard有两种认证方式,一个token认证,另一个是Kubeconfig文件的认证.这个时候的认证不是UserAccount而是获取kubernetes集群资源信息的s ...

  4. iphone屏幕镜像 屏幕镜像怎么用

    iPhone手机投屏到电脑设备上,需要使用到AirPlay镜像功能,但是有些苹果新用户朋友一定还不知道iphone屏幕镜像怎么用吧?你要着急下面为你提供解决方法. 使用工具:iphone.电脑 操作方 ...

  5. svn checkout 实用小技巧

    svn checkout 实用小技巧 by:授客 QQ:1033553122   问题描述: 用svn小乌龟软件,进行update,commit之前,先要把svn工作目录checkout到本地,那么问 ...

  6. 【爬虫】使用xpath与lxml移除特定标签

    移除标签的两种方式 可以用xpath定位 for bad in html.xpath(".//table"): bad.getparent().remove(bad) 参考:htt ...

  7. MFC 单文档添加按钮

    VS 单文档 添加按钮 今天做项目需要在单文档中创建按钮来响应函数,即点击按钮,调用某函数,特此记录. 1. 在XXXView中添加CButton变量,例如 CButton start; 2. 下来就 ...

  8. codeforces 803D Magazine Ad(二分+贪心)

    Magazine Ad 题目链接:http://codeforces.com/contest/803/problem/D ——每天在线,欢迎留言谈论. 题目大意: 给你一个数字k,和一行字符 例: g ...

  9. Orchard详解--第八篇 拓展模块及引用的预处理

    从上一篇可以看出Orchard在处理拓展模块时主要有两个组件,一个是Folder另一个是Loader,前者用于搜索后者用于加载. 其中Folder一共有三个:Module Folder.Core Fo ...

  10. Oracle EBS FORM lov

    存在一种情况: 一个LOV的值当前有效,因此填入保存.但突然无效后,当查询该界面时就会弹出LOV框使其修改. 解决方案: 1. 非常粗暴,不设置校验,在LOV对应的item强行将校验设置为NO. 2. ...