获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft

1.各浏览器下 scrollTop的差异:

IE6/7/8:
可以使用 document.documentElement.scrollTop; 
IE9及以上:
可以使用window.pageYOffset或者document.documentElement.scrollTop 
Safari: 
safari: window.pageYOffset 与document.body.scrollTop都可以; 
Firefox: 
火狐等等相对标准些的浏览器就省心多了,直接用window.pageYOffset 或者 document.documentElement.scrollTop 
Chrome:
谷歌浏览器只认识document.body.scrollTop;
注:标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.
由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用JavaScript进行判断?

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,如果不考虑safari,可以这样:
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。

2.获取scrollTop的值

可以使用window.pageYoffset
Window pageXOffset 和 pageYOffset 属性
其定义:pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
注意: IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 属性 。
由于谷歌兼容问题,可以使用document.body.scrollLeftdocument.body.scrollTop 或者window.pageXoffset与window.pageYoffset。

总结

var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(heightTop);

参考地址:http://blog.csdn.net/lploveme/article/details/7011174

http://www.runoob.com/jsref/prop-win-pagexoffset.html

js中的document.body.scrollTop与document.documentElement.scrollTop的更多相关文章

  1. 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、

    location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...

  2. 一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)

    滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...

  3. js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”,你知道多少

    当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么 ...

  4. js中不同的height, top的对比

    每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...

  5. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  6. js中call、apply、bind那些事2

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  7. 在js中获取 input checkbox里选中的多个值

    思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中).下面进行实例演示: 1.html中展示: <input type=& ...

  8. 关于js中 document.body.scrollTop 不能返回正确值的原因

    本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素,但是不管滚动条在什么位置总是返回是0,造成这样的原因和html的头部声明有关,如果头部声明 为:< ...

  9. document.body的一些用法以及js中的常见问题

    document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight ...

随机推荐

  1. 使用sqlldr向Oracle导入大的文本(txt)文件

    我们有多种方法可以向Oracle数据库里导入文本文件,但如果导入的文本文件过大,例如5G,10G的文本文件,有些方法就不尽如意了,例如PLSQL Developer中的导入文本功能,如果文本文件过大, ...

  2. .Net类的序列化和反序列化 - 进阶者系列 - 学习者系列文章

    今天看了下以前的一个工具的代码,其中涉及到.NET类的序列化和反序列化问题,所以就写一下. 这里说一下.NET类序列化的好处..NET类在序列化之前只是一个相对狭义的类.通过序列化,能够更好的保存该类 ...

  3. [转]Windows下搭建PHP开发环境

    原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要 ...

  4. SQLServer数据库误删数据找回

    记一次SQLServer数据库误删数据找回 昨天 同事在本机清理数据库表时,连接到了生产机,误删了二十几张表,幸好是晚上加班的时候删除的,生产机上当时是一天一备份,还原备份是最后的策略,最关键的还是要 ...

  5. linux中的"32位"与"64位"

    linux内核学习之三:linux中的"32位"与"64位" 在通用PC领域,不论是windows还是linux界,我们都会经常听到"32位" ...

  6. PLAN: 入门题目

    一道道刷完它! A07, A11, A12, A14, A15, A18, A22, A24, A25, A26, A27 A29, A32, A34, A59, A66, A69, A84, B24 ...

  7. html页面显示服务器时间

    全局变量 var lblTimer; var d; ready事件里面写 lblTimer = $("#lbltimer"); d = new Date('<%=DateTi ...

  8. 小菜的SharePoint Tips

    07. 设计模式应用案例(下) 前文用C#代码实现了Facade模式.Adapter模式.Strategy模式.Bridge模式和Abstract Factory模式解决实际业务需求.本文将继续以C# ...

  9. WPF专业编程指南 - 那些根元素<>的解释

    <Window x:Class="Chapter1_WpfApplication1.MainWindow" xmlns="http://schemas.micros ...

  10. CentOS5、6 NFS的安装配置及mount方法

    一.环境介绍: 服务器:centos 192.168.1.225 客户端:centos 192.168.1.226 二.安装: NFS的安装配置:centos 5 : yum -y install n ...