美文网首页
测试scrollTop

测试scrollTop

作者: 前端历险记 | 来源:发表于2015-12-28 18:37 被阅读127次

Chrome:

jQuery

$('html,body').scrollTop() //0
$('html').scrollTop() //0
$('body').scrollTop() // Num
$(document).scrollTop() //Num

JS

window.scrollY //Num
document.documentElement.scrollTop //0
document.body.scrollTop //Num

FireFox

jQuery

$('html,body').scrollTop() // Num
$('html').scrollTop() // Num
$('body').scrollTop() //0
$(document).scrollTop() //Num

JS

window.scrollY //Num
document.documentElement.scrollTop //Num
document.body.scrollTop //0

IE8-9

jQuery

$('html,body').scrollTop() //Num
$('html').scrollTop() //Num
$('body').scrollTop() //0

JS

window.scrollY //Null
document.documentElement.scrollTop //Num
document.body.scrollTop //0

综上来看,火狐与IE实现的方式相同,Chrome与之正好相反。
最终实用方法:

var toper = window.scrollY || document.documentElement.scrollTop

jQuery下的$(window).scrollTop()为通用,但是不能使用作为返回顶部的动画元素,会报错。

2016.1.4补充:以下代码在chrome,火狐中测试通过,参考链接

$(window).scrollTop(0)

2016.3.17补充
根据chrome、firefox、ie的测试结果,不同浏览器测试document.documentElement.scrollTop 和 document.body.scrollTop是一对相爱相杀的对手,所以正式利用这一点,兼容各浏览器,计算滚动的高度可用如下方式:

var scrollDistance = document.documentElement.scrollTop + document.body.scrollTop;

参考文章:链接

相关文章

网友评论

      本文标题:测试scrollTop

      本文链接:https://www.haomeiwen.com/subject/gtabhttx.html