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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
js实现不重复导入的方法
Mar 02 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
Apr 27 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
JavaScript前端面试组合函数
Jun 21 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中PDO的错误处理
2011/09/04 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP速成大法
2015/01/30 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
Python的另外几种语言实现
2015/01/29 Python
python获取本机外网ip的方法
2015/04/15 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
文员的职业生涯规划发展方向
2014/02/08 职场文书
保险公司年会主持词
2014/03/22 职场文书
公司新年寄语
2014/04/04 职场文书
保护动物倡议书
2014/04/15 职场文书
计划生育工作汇报
2014/10/28 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
美元符号 $
2022/02/17 杂记