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的更多相关文章

  1. jQuery中animate与scrollTop、offset().top实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery的offset().top 和position().top 详解 和如何用js实现

    1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...

  3. div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

  4. JQ的offset().top与js的offsetTop区别详解

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  5. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  6. .offset().top是什么意思?

    offset获取匹配元素在当前视口的相对偏移: 返回的对象包含两个整形属性:top,left.此方法只对 可见元素有效. $("#div").offset() 获得位移对象:(此时 ...

  7. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  8. jquery的offset().top与javascript的offsetTop区别?

    offset().top是jquery的方法,需引入jquery,它获取你绑定元素上边框相对于html上边界的偏移量 offsetTop是原生js的方法,它获取你绑定元素上边框相对于离自己最近且pos ...

  9. jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

随机推荐

  1. 转:C#整数三种强制类型转换int、Convert.ToInt32()、int.Parse()的区别

    1.int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); 2.int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; 3. ...

  2. hdu2206IP的计算

    Problem Description 在网络课程上,我学到了很多有关IP的知识.IP全称叫网际协议,有时我们又用IP来指代我们的IP网络地址,现在IPV4下用一个32位无符号整数来表示,一般用点分方 ...

  3. OpenCV学习笔记(一)安装及运行第一个OpenCV程序

    1.下载及安装 OpenCV是一套开源免费的图形库,主要有C/C++语言编写,官网: http://opencv.org/ .在 http://opencv.org/downloads.html 可以 ...

  4. CDZSC_2015寒假新人(1)——基础 c

    Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the wareho ...

  5. LogBoy logo

  6. Python第一印象,大法好!

    为了用flask开发web应用,这两天就开始看了一点点Python.还没看到用Python写网站后台的那部分,就被其强大的数据处理能力和语法的灵活性吸引.肯定是我少见多怪,不过看到人家灵活使用Pyth ...

  7. $.each与$(data).each区别

    在前端使用使用JQuery解析Json数据时,在遍历数组或者对象数据时,经常使用的函数为each.发现此函数有两种形式: $.each $(data).each 所达到的效果是一样的,使用方法的有一些 ...

  8. NDK 的helloworld步奏

    1. helloworld.c #include <string.h> #include <jni.h> /* * Class: com_example_ndk_NativeH ...

  9. 【转】Delphi内嵌ASM简易教程

    Delphi内嵌ASM简易教程 作者:heiying2006-03-19 18:33分类:默认分类标签: 前言 Delphi作为一个快速高效的开发平台,使用的人越来越多,但熟悉在Delphi代码中嵌入 ...

  10. 连接Xively云

    1.注册Xively开发账号 在https://xively.com注册一个开发账户,收到激活邮件后激活,注意,如果登陆后无法进入develop页面,请退出重新登陆. 2.添加设备 3.获取FeedI ...