1.scrollTop是指滚动条滚动的距离
如果没有出现滚动条，则距离为0
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input{
position: fixed;
}
.div1{
width: 200px;
height: 200px;
overflow-y: scroll;
border: 1px solid #d74147;
}
.div3{
width: 200px;
height: 200px;
border: 1px solid #d74147;
margin: 10px 0;
}.div4{
width: 30px;
height: 30px;
background: #dd8811;
}
.div2{
width: 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.cnblogs.com/shenq/p/4968341.html