这是一个使用vanilla JS递归迭代element.offsetTop和element.ooffsetParent的现代1行代码：

功能：

getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent))

用法：

const el = document.querySelector('#div_id');
const elTop = getTop(el)

优势：

无论当前滚动位置如何，始终返回绝对垂直偏移。

传统语法：

function getTop(el) {
  return el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
}

如果您只想在javascript中完成，这里有一些使用getBoundingClientRect（）的单行程序

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

第一行将返回offsetTop，比如相对于文档的Y。第二行将返回offsetLeft，比如相对于文档的X。

getBoundingClientRect（）是一个javascript函数，它返回元素相对于窗口视口的位置。

这是我所创建的最好的代码（与jQuery的offset（）不同，也可以在iframes中使用）。看起来webkit有点不同的行为。

基于meouw的评论：

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        // chrome/safari
        if ($.browser.webkit) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}

要获得元素的总偏移量，可以递归地对所有父偏移量求和：

function getParentOffset(el): number {
if (el.offsetParent) {
    return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
    return 0;
}
}

使用该实用函数，dom元素的总顶部偏移量为：

el.offsetTop + getParentOffset(el);

要有效地检索相对于页面的位置，而不使用递归函数：（还包括IE）

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

这样怎么样，通过传递元素的ID，它将返回左侧或顶部，我们还可以组合它们：

1） 查找左侧

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2） 查找顶部

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

或3）找到左侧和顶部

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');