FireFox与Chrome的scrollTop的兼容问题

做页面时需要判断页面滚动距离让列表对应文字变色，之前直接用document.body.scrollTop获取滚动距离，结果打开火狐发现不可以，获取不到

原生接口测试

Paste_Image.png

document.documentElement 即 元素，而 document.body 即 元素。

测试结果，在火狐上只能通过html元素来获取和设定页面滚动高度，而在谷歌上反之只能用body元素来获取和设定

jquery接口测试

Paste_Image.png

采用 $(document) 可以实现对获取和设定scrollTop的兼容

scrollTop动画实现测试

虽然实现了兼容，但为了有更好的效果，希望采用动画的方式滚动到页面的某位置，而不是直接跳转，这里采用jquery的 animate 函数来实现。

Paste_Image.png

发现虽然可以采用$(document)来实现获取和设定，但动画效果都无法使用，还是只能用body元素和html元素来实现。

最终解决

• 获取或直接设定当前页面滚动高度：
  $(document).scrollTop();//获取，兼容火狐谷歌
• 有动画效果的设定当前页面滚动高度：
  $("body,html").animate({ scrollTop: ... });//动画滚动效果，兼容火狐谷歌

如果想完美兼容各大浏览器的scrolltop

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

ie8、7、6 兼容scroll事件

$(window).bind("scroll",function(){ //…… });