1.scrollTop是指滚动条滚动的距离

如果没有出现滚动条,则距离为0

css:

  1. <style type="text/css">
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. input{
  7. position: fixed;
  8.  
  9. }
  10. .div1{
  11. width: 200px;
  12. height: 200px;
  13. overflow-y: scroll;
  14. border: 1px solid #d74147;
  15. }
  16. .div3{
  17. width: 200px;
  18. height: 200px;
  19. border: 1px solid #d74147;
  20. margin: 10px 0;
  21. }.div4{
  22. width: 30px;
  23. height: 30px;
  24. background: #dd8811;
  25. }
  26. .div2{
  27. width: 30px;
  28. height: 130px;
  29. background: #dd0077;
  30. overflow-y: scroll;
  31. }
  32. </style>

  body:

  1. <input type="button" value="点击"/>
  2. <p>1</p>
  3. <p>1</p>
  4. <p>1</p>
  5. <p>1</p>
  6. <p>1</p>
  7. <p>1</p>
  8. <p>1</p>
  9. <p>1</p>
  10. <p>1</p>
  11. <p>1</p>
  12. <p>1</p>
  13. <p>1</p>
  14. <p>1</p>
  15. <p>1</p>
  16. <p>1</p>
  17. <p>1</p>
  18. <p>1</p>
  19. <p>1</p>
  20. <p>1</p>
  21. <p>1</p>
  22. <p>1</p>
  23. <p>1</p>
  24. <p>1</p>
  25. <p>1</p>
  26. <p>1</p>
  27. <p>1</p>
  28. <p>1</p>
  29. <p>1</p>
  30. <p>1</p>
  31. <p>1</p>
  32. <p>1</p>
  33. <p>1</p>
  34. <div class="div1">
  35. <p>1</p>
  36. <p>1</p>
  37. <p>1</p>
  38. <p>1</p>
  39. <p>1</p>
  40. <p>1</p>
  41. <p>1</p>
  42. <p>1</p>
  43. <p>1</p>
  44. <p>1</p>
  45. <p>1</p>
  46. <p>1</p>
  47. <p>1</p>
  48. <p>1</p>
  49. <p>1</p>
  50. </div>
  51.  
  52. <div class="div2">
  53. <p>1</p>
  54. <p>1</p>
  55. <p>1</p>
  56. <p>1</p>
  57. <p>1</p>
  58. <p>1</p>
  59. <p>1</p>
  60. <p>1</p>
  61. <p>1</p>
  62. <p>1</p>
  63. <p>1</p>
  64. </div>
  65.  
  66. <p class="div5">1</p>
  67. <p>1</p>
  68. <p>1</p>
  69. <p>1</p>
  70. <p>1</p>
  71. <p>1</p>
  72. <p>1</p>
  73. <p>1</p>
  74. <p>1</p>
  75. <p>1</p>
  76. <p>1</p>
  77. <p>1</p>
  78. <p>1</p>
  79. <p>1</p>
  80.  
  81. <div class="div3">
  82. <div class="div4">
  83. </div>
  84. </div>

  js

  1. $(function(){
  2. $('input').click(function() {
  3. //alert($('.div2').scrollTop());
  4.  
  5. //alert($('.div1').offset().top);//90
  6.  
  7. //alert($('body').scrollTop());
  8.  
  9. //alert($('.div1').offset().top);
  10. //alert($('body').offset().top);
  11. alert($('html').offset().top);//负数是因为找不到
  12. //alert($('html').scrollTop());
  13. //alert($('.div1').scrollTop());
  14.  
  15. });
  16. });

  

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. HDU 1070 - Milk

    给每种牛奶价格和量 要求买最便宜的牛奶 #include <iostream> using namespace std; int t,n; ][]; ],v[]; int main() { ...

  2. V - 不容易系列之(4)――考新郎(第二季水)

    Description          国庆期间,省城HZ刚刚举行了一场盛大的集体婚礼,为了使婚礼进行的丰富一些,司仪临时想出了有一个有意思的节目,叫做"考新郎",具体的操作是这 ...

  3. Hadoop配置文件-core-site.xml

     name value  Description   fs.default.name hdfs://hadoopmaster:9000 定义HadoopMaster的URI和端口  fs.checkp ...

  4. (jQuery||Zepto).extend 的一个小问题

    最近一直在搞移动端,也由于自己对jQuery比较熟悉,再加上Zepto提供了跟jQuery一样的API,所以就选择了Zepto作为开发框架. 由于是移动端开发,所以也应用了一些ES5新增的API,比如 ...

  5. SlimDX的DirectSound模块

    网上SlimDX的资源很少,搜到了http://www.xukailun.me/article/238/这篇关于<SlimDX的DirectSound模块应用实战>的文章,备份下来以备不时 ...

  6. 【ecos学习5】redboot 加载运行hello world

    背景: 从主机 192.168.2.14 IP,下载bin文件hello到ecos. redboot>load -v -h 192.168.2.14 hello Using default pr ...

  7. View的工作原理(二)——layout

    1.当View的measure被确定后,会调用ViewGroup的layout方法,之后使用onLayout方法(同样也是系统未自动重写,要我们自己完成)遍历子View(根Measure的形式是一样得 ...

  8. java学习一目了然——异常必知

    java学习一目了然--异常必知 我们只要学java,异常肯定非常熟悉,该抛的时候抛一下就行.但是这其中还有点小细节需要注意.就用这个小短篇来说一下异常处理中的小细节吧. 异常处理 RuntimeEx ...

  9. C语言基础08

    1.指针和指针变量 指针变量:是保存变量地址的变量,存放只有地址; 指针:是变量的地址,存放的可以是3,4.5,YES; 普通变量与指针变量什么不同呢? 普通变量只能存取我们常常看到的类型数据,指针变 ...

  10. Google机器学习笔记 4-5-6 分类器

    转载请注明作者:梦里风林 Google Machine Learning Recipes 4 官方中文博客 - 视频地址 Github工程地址 https://github.com/ahangchen ...