1.scrollTop是指滚动条滚动的距离
如果没有出现滚动条,则距离为0
css:
<style type="text/css"> *{ margin: 0; padding: 0; } input{ position: fixed; } .div1{ 200px; height: 200px; overflow-y: scroll; border: 1px solid #d74147; } .div3{ 200px; height: 200px; border: 1px solid #d74147; margin: 10px 0; }.div4{ 30px; height: 30px; background: #dd8811; } .div2{ 30px; height: 130px; background: #dd0077; overflow-y: scroll; } </style>
body:
<input type="button" value="点击"/> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <div class="div1"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </div> <div class="div2"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </div> <p class="div5">1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <div class="div3"> <div class="div4"> </div> </div>
js
$(function(){ $('input').click(function() { //alert($('.div2').scrollTop()); //alert($('.div1').offset().top);//90 //alert($('body').scrollTop()); //alert($('.div1').offset().top); //alert($('body').offset().top); alert($('html').offset().top);//负数是因为找不到 //alert($('html').scrollTop()); //alert($('.div1').scrollTop()); }); });
2offset().top指的是到文档的距离
不是到可视区域的文档的距离,是最顶部的文档的距离
http://www.heishou.com.cn/点击这个链接,交流论坛黑手安全网