求教js如何获取元素到浏览器顶部的距离

1、打开sublime text3，也可以用其他编辑器，这里新建一个HTML文档作为示范。

2、创建一下HTML文档的基本架构。

3、设置多个标签，这样等会可以有更多选择。

4、创建一个JS文档，并且与HTML文档关联。

5、输入var test = document.getElementById( "pp").offsetTopdocument.write( test )。

6、offsetLeft就能知道元素到顶部的距离。

看着实在是好晕，于是各种整理后手动画了一个：

发现主要分为几部分：

当定位时，position的移动的距离，

scrollHeight:文档总高度，可滚动总高度（包含元素本身，内外边距，边框）

scrollWidth:文档总宽度，可滚动总宽度（包含元素本身，内外边距，边框）

scrollTop:相对于滚动条顶部的偏移，指滚动条顶端与当前滚动条位置的距离

scrollLeft:相当于滚动与左端的偏移

clientHeight:可视区域高度（不包含边框，滚动条）

clientWidth:可视区域宽度

clientTop:内容区域相对于整个元素的左上角，当有边距时为边距的厚度，无边距时可以为0

clientLeft:内容区域相对于整个区域的左上角，有边距时为边距的宽度，可以为0

offsetHeight:获取自身元素（包含边距，滚动条）

offsetWidth:获取自身元素（包含边距，滚动条）

offsetTop:相对于最近定位祖元素的偏移，（祖元素必须是position,relative,absloute,fixed）

offsetLeft:同offsetTop

返回第一个祖定位元素，若父级元素无定位返回body,若父级元素已经定位返回相对应父级对应元素。