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才能使用,它获取的是你绑 ...
随机推荐
- 转:C#整数三种强制类型转换int、Convert.ToInt32()、int.Parse()的区别
1.int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); 2.int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; 3. ...
- hdu2206IP的计算
Problem Description 在网络课程上,我学到了很多有关IP的知识.IP全称叫网际协议,有时我们又用IP来指代我们的IP网络地址,现在IPV4下用一个32位无符号整数来表示,一般用点分方 ...
- OpenCV学习笔记(一)安装及运行第一个OpenCV程序
1.下载及安装 OpenCV是一套开源免费的图形库,主要有C/C++语言编写,官网: http://opencv.org/ .在 http://opencv.org/downloads.html 可以 ...
- CDZSC_2015寒假新人(1)——基础 c
Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the wareho ...
- LogBoy logo
- Python第一印象,大法好!
为了用flask开发web应用,这两天就开始看了一点点Python.还没看到用Python写网站后台的那部分,就被其强大的数据处理能力和语法的灵活性吸引.肯定是我少见多怪,不过看到人家灵活使用Pyth ...
- $.each与$(data).each区别
在前端使用使用JQuery解析Json数据时,在遍历数组或者对象数据时,经常使用的函数为each.发现此函数有两种形式: $.each $(data).each 所达到的效果是一样的,使用方法的有一些 ...
- NDK 的helloworld步奏
1. helloworld.c #include <string.h> #include <jni.h> /* * Class: com_example_ndk_NativeH ...
- 【转】Delphi内嵌ASM简易教程
Delphi内嵌ASM简易教程 作者:heiying2006-03-19 18:33分类:默认分类标签: 前言 Delphi作为一个快速高效的开发平台,使用的人越来越多,但熟悉在Delphi代码中嵌入 ...
- 连接Xively云
1.注册Xively开发账号 在https://xively.com注册一个开发账户,收到激活邮件后激活,注意,如果登陆后无法进入develop页面,请退出重新登陆. 2.添加设备 3.获取FeedI ...