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/点击这个链接,交流论坛黑手安全网
scrollTop,offset().top的更多相关文章
- jQuery中animate与scrollTop、offset().top实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery的offset().top 和position().top 详解 和如何用js实现
1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...
- div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...
- JQ的offset().top与js的offsetTop区别详解
一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...
- JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- .offset().top是什么意思?
offset获取匹配元素在当前视口的相对偏移: 返回的对象包含两个整形属性:top,left.此方法只对 可见元素有效. $("#div").offset() 获得位移对象:(此时 ...
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
css3的transform变换scale和translate等影响jQuery的position().top和offset().top
- jquery的offset().top与javascript的offsetTop区别?
offset().top是jquery的方法,需引入jquery,它获取你绑定元素上边框相对于html上边界的偏移量 offsetTop是原生js的方法,它获取你绑定元素上边框相对于离自己最近且pos ...
- jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法
jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...
随机推荐
- E - The King
Description Once upon a time in a country far away lived a king and he had a big kingdom. He was a v ...
- 第一章——Activity的生命周期
问题总结: 1.Activity完整的生命周期 2.当打开第二个Activity并关闭时候的生命周期. ①.解释为什么onPause()方法不要有耗时操作 3.Activity发生异常重启的时候问题: ...
- hdu 2966 In case of failure k-d树
题目链接 给n个点, 求出每个点到离它最近的点的距离. 直接建k-d树然后查询就可以 感觉十分神奇... 明白了算法原理但是感觉代码还不是很懂... #include <bits/stdc++ ...
- java之坑-----List中的重复添加同一对象
java中List的add方法不检查List中是否含有已加入项 java中List的add方法不检查List中是否含有已加入项 java中List的add方法不检查List中是否含有已加入项 重要事情 ...
- Ice_cream's world I--hdu2120
Ice_cream's world I Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- 整数v,从高位到低位,取c位数,得到最大数 (其中:v>=10^c)
题目如上,例子v=22312324,c=3,求得最大数为334. 用自己的想法实现了一遍,如果你有更好的方法的话,欢迎不吝赐教. 我的思路是,先将整数v按位存入一个数组,数组低位为整数高位,如num[ ...
- java学习:AWT组件和事件处理的笔记(1)--文本框上的ActionEvent事件
学习处理事件时,必须很好的掌握事件源,监视器,处理事件的接口 1.事件源 能够产生java认可事件的对象都可称为事件源,也就是说事件源必须是对象 2.监视器 监 ...
- MYSQL 查看表定义的 4 种方法
方法 1. show create table table_name;可以用这个看表的代码. show create table Strings; 方法 2. show full columns fr ...
- python学习day8
目录 一.异常 二.多线程 三.守护线程与join 四.GIL与多线程锁 五.递归锁与信号量 六.线程间同步与交互 七.多进程 八.进程间通信与数据共享 九.进程池 一.异常 1.异常处理 在编程过程 ...
- 从HCE的各种问题 讨论未来趋势
为了能让NFC手机支持NFC支付,维萨公司和万事达公司宣布了对HCE的研发,并且将很快推出最新的HCE规范.从2012年末,我一直在关注关于HCE的相关信息,其原因是由于我们公司参与了名为Simply ...