scrollTop,offset().top

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.heishou.com.cn/点击这个链接,交流论坛黑手安全网

上一篇:windows7下php5.4成功安装imageMagick,及解决php imagick常见错误问题。(phpinfo中显示不出来是因为:1.imagick软件本身、php本身、php扩展三方版本要一致,2.需要把CORE_RL_*.dll多个文件放到/php/目录下面)


下一篇:Zabbix实战-简易教程(7)--监控第一台host