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。