现有的答案现在已经过时了。本机getBoundingClientRect()方法已经存在了很长一段时间，并且完全满足问题的要求。此外，所有浏览器都支持它（似乎包括 IE 5！）

从MDN 页面：

返回值是一个 TextRectangle 对象，它包含描述边框的只读左、上、右和下属性，以像素为单位，左上角相对于视口的左上角。

你像这样使用它：

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

就我而言，为了安全起见，我将 window.scroll 添加到等式中：

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

这使我能够获得元素在文档上的真实相对位置，即使它已被滚动。

var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

编辑： 添加一些代码来解释页面滚动。

function findPos(id) {
    var node = document.getElementById(id);     
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

id 参数是您想要其偏移量的元素的 id。改编自quirksmode 帖子。

jQuery 非常优雅地实现了这一点。如果您查看 jQuery's 的源代码offset，您会发现它基本上是这样实现的：

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};