原生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;
原生javascript实现回到顶部平滑滚动的更多相关文章
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- JavaScript实现回到顶部
HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...
- Javascript做图片无缝平滑滚动
因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- 原生js实现回到顶部
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- 原生JS实现返回顶部和滚动锚点
;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...
- jq与js的写法,示例回到顶部div滚动显示隐藏
jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- 原生JavaScript技巧大收集100个
原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var p ...
- 100个常用的原生JavaScript函数
1.原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) { var temp; var icount = 0; var ...
随机推荐
- 【Java每日一题】20170329
20170328问题解析请点击今日问题下方的“[Java每日一题]20170329”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...
- 【转】Mybatis源码解读-设计模式总结
原文:http://www.crazyant.net/2022.html?jqbmtw=b90da1&gsjulo=kpzaa1 虽然我们都知道有26个设计模式,但是大多停留在概念层面,真实开 ...
- 【Linux命令】top命令
一.简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,常用于服务端性能分析. 二.使用 1.查看进程内线程情况 top -Hp 2556(2556为进程号)找 ...
- [ORACLE]ORA-28002 The password will expire within 7 days.将不能登录系统
错误“ORA-28002 The password will expire within 7 days. Cannot logon to the database“当在进程调度器上运行AE程序可能遇 ...
- springmvc 获取请求头信息
@PostMapping("/test/post") public void post(@RequestBody String params, @RequestHeader(req ...
- vue 构建项目vue-cli
1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...
- (办公)eclipse连接github cannot open git-upload-pack(git-receive-pack)
原文地址:https://blog.csdn.net/royal__moon/article/details/79427431 打开eclipse安装目录下的eclipse.ini添加一句:-Dhtt ...
- CentOS 7.x默认没有ifconfig?!
刚装了CentOS 7.0,安装界面非常漂亮,装完后发现没有ifconfig命令.yum install net-tools后出现. 有两个可能,一个是mini版本的原因,二一个可能我在安装过程中配置 ...
- JavaWeb:servlet实现下载与上传功能
本文内容: servlet实现下载功能 servlet实现上传功能 首发日期:2018-07-21 servlet实现下载功能 实现流程 1.首先制作一个jsp页面,主要是用来触发下载的.这里可以根据 ...
- Spring MVC 全注解配置 (十一)
完整的项目案例: springmvc.zip 目录 实例 项目结构: 父级的pom配置: <?xml version="1.0" encoding="UTF-8&q ...