JavaScript 获取 scrollTop 的跨浏览器兼容方案

JavaScript 获取 scrollTop 的跨浏览器兼容性问题

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

通用的 scrollTop 获取方案

为了实现跨浏览器兼容，获取 scrollTop 值的完美且简洁的赋值写法如下：

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