从原生JS说起

元素的偏移有相对父元素的偏移，相对当前视图（浏览器窗口）的偏移，和相对于整个文档的偏移。

offsetTop，offsetLeft

element.offsetTop，element.offsetLeft直接返回元素左上角相对于父元素左上角的偏移。

getBoundingClientRect()

element.getBoundingClientRect().left与element.getBoundingClientRect().top返回元素到viewport左上角的距离

window.pageXOffset，window.pageYOffset|| window.scrollX , window.scrollY

这两组都代表了当前窗口（视图）滚动了多少位置，MDN说这两个就是别名关系，区别在于浏览器兼容性。

document.documentElement.scrollLeft，document.documentElement.scrollTop

根据MDN的说明，element.scrollLeft属性代表了一个元素的滚动条（并不是window的滚动条）滚动的距离，而document.documentElement查阅得知其返回文档的根节点（如html），那么document.documentElement.scrollLeft即为整个窗口的滚动距离，查阅时还发现另一种获取窗口滚动距离的方法即document.body.scrollLeft，两者的功能是一样的，区别在于是否声明DTD（即!Doctype...）

小结

元素到父元素距离，元素到视图左上角距离，窗口滚动距离都有了，唯一不知道的就是元素到文档顶部距离了。根据上文内容，可以用当前元素到窗口左上角距离➕窗口滚动距离得到元素相对文档开头绝对坐标

x = element.getBoundingClientRect().left+window.scrollX
y = element.getBoundingClientRect().top+window.scrollY

此处的window.scrollX,window.scrollY可用前文给出的其他方法酌情替代。
其实如果不想深究这好几种方法具体的兼容性情况，那么

y= window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

可能是一个省心的选择。

jQuery

虽然我不习惯用jQuery，但是一旦看到使用jQuery的代码方案，总觉得非常易懂并且写起来非常方便，应该说jQuery的设计是从实际工程角度出发的，非常合理。

.offset()

直接就上offset，.offset()直接返回的就是元素border左上角（无margin）在文档中的相对距离，分别为top和left

.position()

.position()返回的是元素含padding部分（不含border与margin）相对父元素的坐标

.offsetParent()

.offsetParent()，第一眼我看到还以为是到父元素的相对坐标，但其实并不是，只是“离指定元素最近的含有定位信息的祖先元素”，见https://www.html.cn/jqapi-1.9/offsetParent/

jQuery源码

占坑