scrollTop 表⽰滚动的⾼度,默认从position:0;开始向下滚,scrollTop(offset)的offset表⽰相对顶部的偏移,以像素计,
scrollTop()滚动的⾼度既能‘设置'滚动值,也能‘获取'滚动值。当设置滚动值时,该⽅法就会设置所有匹配元素的滚动值。当获取滚动值时,该⽅法只返回第⼀个匹配元素的滚动位置。需要获取scrollTop的值,可以参考如下代码:复制代码 代码如下:
var scrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;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⼦节点,即
标签;documentElement 是整个节点树的根节点root,即 标签;
DOM把层次中的每⼀个对象都称之为节点,就是⼀个层次结构,你可以理解为⼀个树形结构,就像我们的⽬录⼀样,⼀个根⽬录,根⽬录下有⼦⽬录,⼦⽬录下还有⼦⽬录。
以HTML超⽂本标记语⾔为例:整个⽂档的⼀个根就是,在DOM中可以使⽤document.documentElement来访问它,它就是整个节点树的根节点。⽽body是⼦节点,要访问到body标签,在脚本中应该写:document.body。
如果你想点击按钮滚动到page顶部,使⽤jquery点击执⾏代码$(document).scrollTop(0)就可以滚动到顶部了。同样的滚动位置scrollLeft表⽰往左边滚动的位置。以上所述就是本⽂的全部内容了,希望⼤家能够喜欢。
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- haog.cn 版权所有 赣ICP备2024042798号-2
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务