javascript scrollTop正解使用方法


Posted in Javascript onNovember 14, 2013

javascript scrollTop 获取滚动条相对于其顶部的偏移(如制作自动显示隐藏的“返回顶部”按钮)。在实际应用中经常会遇到以下问题:
document.documentElement.scrollTop在Chrome里总为0
document.body.scrollTop 在IE和firefox里总为0

1、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异
示例:

window.scroll(0,100)
console.log(“window.pageYOffset:”+window.pageYOffset)
console.log(“document.documentElement.scrollTop:”+document.documentElement.scrollTop)
console.log(“document.body.scrollTop:”+document.body.scrollTop)

IE6/7/8:
doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:100
document.body.scrollTop:0

无doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:0
document.body.scrollTop:100
Safari/Chrome:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100

Firefox/Opera:

doctype:
window.pageYOffset:100
document.documentElement.scrollTop:100
document.body.scrollTop:0

无doctype:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100

2、获取scrollTop值
完美的获取scrollTop 赋值简写 :

var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
Javascript 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
简单的Jquery遮罩层代码实例
Nov 14 #Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 #Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 #Javascript
MyEclipse取消验证Js的两种方法
Nov 14 #Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 #Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 #Javascript
javascript按位非运算符的使用方法
Nov 14 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
Python 中Operator模块的使用
2021/01/30 Python
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
金融专业大学生自我评价
2014/01/09 职场文书
安全环保标语
2014/06/09 职场文书
关于爱国的标语
2014/06/24 职场文书
庆元旦主持词
2015/07/06 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
js 实现验证码输入框示例详解
2022/09/23 Javascript