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 相关文章推荐
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 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读取数据库信息的几种方法
2008/05/24 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Vue中key的作用示例代码详解
2020/06/10 Javascript
python实现人人网登录示例分享
2014/01/19 Python
python中使用序列的方法
2015/08/03 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
促销活动方案模板
2014/02/24 职场文书
法人委托书范本格式
2014/09/15 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
PHP中->和=>的意思
2021/03/31 PHP