js scrollTop兼容性问题分析

1、各浏览器下 scrollTop的差异

IE6/7/8：
对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ；

对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  ；
Safari:

safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
Firefox:

火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；

2、获取scrollTop值

完美的获取scrollTop 赋值短语 ：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。

仔细观察这句赋值，你发现啥了没？？
没错， 就是 window.pageYOffset  (Safari)   被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行 或运算时，系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端，即scrollTop值为 0 时。  IE 下 window.pageYOffset  (Safari) 返回为 undefine ，此时将 window.pageYOffset  (Safari) 放在或运算最后面时， scrollTop 返回 undefine ,  undefine 用在接下去的运算就会报错咯。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine.  可以安全使用..
所以说到头还是IE的问题咯. 杯具…

精神有点恍惚，不知道有没有表达清楚。
不过最后总结出来这句实验过OK，大家放心使用；

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

documentElement 和 body 相关说明：

body是DOM对象里的body子节点，即 标签；

documentElement 是整个节点树的根节点root，即 标签；

DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

在页面上加上了

  "http://www.w3.org/TR/html4/loose.dtd">

之后，document.body.scrollTop的值一直为0（在IE和FF下），网上有人改为document.documentElement.scrollTop就可以了，试用了一下真的OK了。

 
但是当换到Google浏览器时，问题又出来了，document.documentElement.scrollTop值一直为0！到是document.body.scroll的值正确了。

 javascript">

首先说明，这段代码是正确的。只是当document.documentElement和document.documentElement.scrollTop都有值，但是document.documentElement.scrollTop==0时，有点误导人，呵呵。

于是我改成如下：

[javascript] view plain copy
var top = document.body.scrollTop; 
if(0==top){ 
    top = document.documentElement.scrollTop; 
} 
alert(top); 
 
 
后来发现
var top = document.body.scrollTop | document.documentElement.scrollTop;