获取当前页面滚动条纵坐标的位置: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. dos下的cd指令

    进入同根目录下的目录: 1.进入同根目录的下一级目录:cd 目录名 2.返回同根目录的上一级目录:cd .. 3.返回目录的根目录:cd \ 进入不同根目录下的目录: 1.进入另外一个根目录(的默认目 ...

  2. 实现透明渐变的Activity

    如果光是透明全屏的Activity的话,直接继承内置theme即可 <activity android:theme="@android:style/Theme.NoTitleBar.F ...

  3. Tomcat过滤器模拟

    直接上代码Filter.java public interface Filter { //过滤器 public void doFilter(Request request,Response respo ...

  4. 项目管理Project

    使用Project进行项目管理 - 项目管理系列文章 Posted on 2014-02-04 11:59 lzhdim 阅读(1175) 评论(0) 编辑 收藏 本系列文章列表地址:http://w ...

  5. 关于PHP 缓冲区

    最权威的资料:http://php.net/manual/en/function.flush.php 里面有全世界的开发者的留言.常见问题都有讨论. 再说一下PHP 缓冲区相关的. web服务器 如 ...

  6. Fiddler工具

    Fiddler初探 我们知道监视Http和Https请求的工具有多种,例如:HttpWatch,FireBug等.但是今天接触到一种新的工具Fiddler.Fiddler能记录所有客户端和服务器的ht ...

  7. Hive中抽取连续多天登录用户

    昨天群上有人发个阿里的面试题,题目描述大概如下: 数据源:用户登录表,只有俩个字段,uid和dt 试用HQL抽取出连续登录了K天的用户uid 第一个想法就是直接用一个UDF解决,按uid分组,把dt收 ...

  8. soket.io.js + angular.js + express.js(node.js)

    soket.io.js + angular.js + express.js(node.js) 今天搭建个soket.io.js + angular.js + express.js的环境, 采坑无数,特 ...

  9. ASP.NET WebForm 的路由

    ASP.NET WebForm 的路由 偷会闲, 看看博客园, 有筒子写了篇: ASP.NET的路由 我翻了翻两前的一份邮件, 是我当时在项目之余的时间研究的,那时还没用MVC,所有项目都是 WebF ...

  10. MongoDB服务安装

    0.解压压缩包:D:\lab\mongodb 1.创建目录: D:\lab\mongodb\data D:\lab\mongodb\data\db D:\lab\mongodb\data\log D: ...