scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离。
写这篇博客的时候，我对浏览器和元素的位置关系理解的也不太透彻，有错误的地方请大家指正。

一 offset

特别说明：offsetTop是只读属性。

offsetTop由如下两个单词构成：
（1）.offset：具有偏移量的意思。
（2）.top：具有顶部的意思。
此属性的功能确实名副其实，它返回当前元素顶部相对指定元素顶部的偏移量。
这个指定元素由当前元素的offsetParent属性确定。
offsetParent属性返回值简单介绍如下：
（1）.返回距离当前元素最近的采用定位祖先元素。
（2）.如果祖先元素中没有采用定位的元素，则返回body元素。

1.offsetTop :当前对象到其上级层顶部的距离。
初次接触offset相关api是我天真的以为他会拥有四个方向，但是实验证明仅存下面几种属性
2.offsetLeft :当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth :当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight :当前对象的高度

实例1

子元素 {box-sizing: border-box;height: 100px;width: 100px;margin-top: 100px;margin-left: 100px;background: rgba(255,114,233,0.2);}
父级元素{/*position: relative;*/margin-left: 100px;margin-top: 100px;width: 400px;height: 400px;background: rgba(255,244,233,0.9);}

子元素1：宽和高均为100像素，margin-top：100px，margin-left：100px
父级元素：宽和高均为400像素，margin-top：100px，margin-left：100px

这里大家会看到，我们计算出来的偏移量都是相对于body进行的，但是如果我给父级元素加上定位position：realtive得到的新结果为

二 scrollTop

设置 <div> 元素中滚动条的垂直偏移，用jq表达更直观一些。

$(".btn1").click(function(){$("div").scrollLeft(100);
});

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

这里需要提一下你所匹配到的元素要存在滚动条，否则你懂的～

语法

$(selector).scrollTop(offset)
同理
document.getElementById("selector").scrollTop(offset);

注释：该方法对于可见元素和不可见元素均有效。
注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。
注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。

scrollTop及offsetTop的对比相关推荐

Js中关于top、clientTop、scrollTop、offsetTop的用法
2019独角兽企业重金招聘Python工程师标准>>> Js中关于top.clientTop.scrollTop.offsetTop的用法网页可见区域宽: document.bo ...
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
一.先介绍clientHeight与scrollHeight的区别 clientHeight: 在页面上返回内容的可视高度(不包括边框,边距或滚动条) scrollHeight: 返回整个元素的高度( ...
令人头疼的clientTop、scrollTop、offsetTop
2019独角兽企业重金招聘Python工程师标准>>> 参考:http://www.cnblogs.com/gagarinwjj/p/conflict_client_offset_s ...
[转]html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位 ...
转 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位 ...
clienttop,clientleft,scrolltop,scrollleft,offsettop,offsetleft全解析
一张图网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body. ...
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
这里是javascript中制作滚动代码的常用属性页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页 ...
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
这里是javascript中制作滚动代码的常用属性页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; wi ...
offsetTop、clientTop、scrollTop、offsetTop
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

scrollTop及offsetTop的对比

一 offset

特别说明：offsetTop是只读属性。

实例1

二 scrollTop

这里需要提一下你所匹配到的元素要存在滚动条，否则你懂的～

scrollTop及offsetTop的对比相关推荐

最新文章

热门文章

scrollTop及offsetTop的对比

一 offset

特别说明：offsetTop是只读属性。

实例1

二 scrollTop

这里需要提一下 你所匹配到的元素要存在滚动条，否则你懂的～

scrollTop及offsetTop的对比相关推荐

最新文章

热门文章

这里需要提一下你所匹配到的元素要存在滚动条，否则你懂的～