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;

DTD相关说明：

页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。

页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容，不管有没有 DTD，可以使用如下代码：

var scrollTop = window.pageYOffset  //用于FF

                || document.documentElement.scrollTop

                || document.body.scrollTop

                || 0;

documentElement 和 body 相关说明：

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

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

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

以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。

来源：

http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332076.html

http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html

【转】获取scrollTop兼容各浏览器的方法，以及body和documentElement是啥？的更多相关文章

  1. 获取scrollTop兼容各浏览器的方法，以及body和documentElement

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...

  2. 关于onscroll函数兼容各浏览器的方法分析

    关于window.onscroll函数兼容各浏览器的方法分析 1.当前文档的渲染模式是决定onscroll函数兼容性根本原因 目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode).接近标 ...

  3. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  4. 兼容ie浏览器的方法

    让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法   最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,f ...

  5. JS兼容IE浏览器的方法

    背景 系统需要兼容蛋疼的IE6... 解决方案 *{ 兼容IE6-8 }* <!--[if lt IE 9]> <script src="@{'/public/mng/ja ...

  6. 兼容所有浏览器的CSS3圆角

    兼容所有浏览器的CSS3圆角      解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待. ...

  7. JS中常遇到的浏览器兼容问题和解决方法

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

  8. JS中常遇到的浏览器兼容问题和解决方法【转】

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

  9. jquery的js代码兼容全部浏览器的解决方法

    //以下均可console.log()实验   var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网 ...

随机推荐

  1. XTU1236 Fraction

    Fraction Accepted : 124 Submit : 806 Time Limit : 1000 MS Memory Limit : 65536 KB Fraction Problem D ...

  2. 【ACM】杭电ACM题一直WA求高手看看代码

    数据测试了好几个都没问题,可以就是WA不让过,检测了2个小时还是没发现有什么问题T_T!!求高手看看代码,小弟在此谢谢各位哦! #include <stdio.h> #include &l ...

  3. zookeeperclient代码解读

    近期一直在忙WebPageTest(下面简称wpt)开源库的改动工作,当中一项工作须要将zookeeper(下面简称zk)集成到wpt里. zk作为分布式系统的同步工具.实现了写的原子性(要么失败.要 ...

  4. 缺少dll文件的解决方法

    1.什么是dll文件 从专业的角度来说,dll文件,即动态连接库,是一种不可执行的二进制文件,它允许程序共享执行特殊任务所必需的代码和其他资源.打个比方,相当于你去饭店吃饭,只人带上钱或卡就可以了,不 ...

  5. 高可用性(HA) 4 - network bonding

    我们都知道,hadoop namenode是一个臭名昭著的单点故障点(SPOF). 当你找到一篇High  Availability的文章, 以为使用heartbeat/pacemaker, coro ...

  6. iOS类方法实例方法 与 self

    Objective-C里面既有实例方法也类方法.类方法(Class Method) 有时被称为工厂方法(Factory Method)或者方便方法(Convenience method).工厂方法的称 ...

  7. php之快速入门学习-8(if-else)

    PHP If...Else 语句 条件语句用于根据不同条件执行不同动作. PHP 条件语句 当您编写代码时,您常常需要为不同的判断执行不同的动作.您可以在代码中使用条件语句来完成此任务. 在 PHP ...

  8. 科学计算法帮助类MathUtils

    import java.math.BigDecimal; import java.math.MathContext; import java.math.RoundingMode; /** * 科学计算 ...

  9. Jmeter:Java request

    http://blog.csdn.net/xiazdong/article/details/7873767

  10. 使用loadrunner对https协议（单双向SSL）的web端性能测试 （转）

    1.项目背景 1.1 单双向SSL的含义及部署 单向SSL即我们说到的https协议. 特点是,浏览器需要请求验证服务器证书: 基本含义是:一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务 ...