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

这里有一些关于Angular2 +的东西。在版本13上测试

event.srcElement.getBoundingClientRect().top;

我假设在web页面中存在一个id为btn1的元素，并且包含jQuery。这适用于所有现代浏览器的Chrome, FireFox, IE >=9和Edge。 jQuery只是用来确定相对于文档的位置。

var screenRelativeTop =  $("#btn1").offset().top - (window.scrollY || 
                                            window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft =  $("#btn1").offset().left - (window.scrollX ||
                                           window.pageXOffset || document.body.scrollLeft);

有时getBoundingClientRect()对象的属性值在IE中显示为0。在这种情况下，你必须为元素设置display = 'block'。您可以使用下面的代码为所有浏览器获得偏移。

扩展jQuery功能:

(function($) {
    jQuery.fn.weOffset = function () {
        var de = document.documentElement;
        $(this).css("display", "block");
        var box = $(this).get(0).getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    };
}(jQuery));

使用:

var elementOffset = $("#" + elementId).weOffset();

现有的答案现在已经过时了。原生的getBoundingClientRect()方法已经存在很长一段时间了，它所做的正是问题所要求的。此外，所有浏览器都支持它(似乎包括IE 5 !)

来自MDN页面:

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

你可以这样使用它:

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

谢谢你的回答。Prototype似乎已经有了这样一个函数(page()函数)。通过查看该函数的源代码，我发现它首先计算相对于页面的元素偏移位置(即文档顶部)，然后从中减去scrollTop。更多细节请参见原型的源代码。