您的位置：首页 > 运维架构

offset 与scrollTop 的应用

2014-10-07 03:10 344 查看

//////////求一个节点在有滚动条包裹的父节点里面，offset().top的值

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".btn1").click(function(){
alert($("p").offset().top); //固定值
alert($("#tst").offset().top);
alert($("div").scrollTop()+" px");
alert($("div").scrollTop()+$("#tst").offset().top); //这才算div 孩子p的offset值
});
});
</script>
</head>
<body>
<p>p在div同级</p>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
<p id="tst">p在div里面包裹着，会所父节点div滚动，影响offset的值，应该要加上滚动的值</p>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

</div>

<button class="btn1">获得 scrollbar top offset</button>
<p>试着移动滚动条，然后再次点击按钮。</p>
</body>
</html>

/////////////////求window的scrollTop()的值
如果没有滚动条的时候，$(window).scrollTop()是0，这时候的window的高度通过$(window).height()取得；
如果有滚动条出现，滚动的搞定要加上window的高度
$(window).scrollTop()+$(window).height()，这才是滚动了多少高度

附件：http://down.51cto.com/data/2364923

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 应用 offset scrollTop

相关文章推荐

新的分享

章节导航