FireFox与Chrome的scrollTop的兼容问题
直到我今天在FireFox测试时发现,火狐下页面滚动的跳转功能无法使用。
1、原生接口测试
这里先提一下:
document.documentElement 即 < html > 元素,而 document.body 即 < body > 元素。
测试结果,在火狐上只能通过html元素来获取和设定页面滚动高度,而在谷歌上反之只能用body元素来获取和设定。
2、jquery接口测试
上面是使用原生的scrollTop属性来获取与设定,而jquery自己也实现了对scrollTop属性的封装,可以试试他的兼容性。
发现采用 $(document) 可以实现对获取和设定scrollTop的兼容,大喜。
3、scrollTop动画实现测试
虽然实现了兼容,但为了有更好的效果,我希望采用动画的方式滚动到页面的某位置,而不是直接跳转,这里采用jquery的 animate 函数来实现。
发现虽然可以采用$(document)来实现获取和设定,但动画效果都无法使用,还是只能用body元素和html元素来实现。
最终解决方案
遂最完美的实现方案是:
获取或 直接设定 当前页面滚动高度:
$(document).scrollTop();//获取,兼容火狐谷歌
有动画效果的设定当前页面高度:
$("body,html").animate({ scrollTop: ... });//动画滚动效果,兼容火狐谷歌
http://www.tuicool.com/articles/UZNv2u