Javascript 如何获取元素'；s相对于浏览器的顶部位置'；s视口？

我想获得元素相对于浏览器视口（显示页面的视口，而不是整个页面）的位置。如何在JavaScript中实现这一点

---

非常感谢

编辑：为页面滚动添加一些代码

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。改编自。

页面上的函数将返回一个矩形，其中包含所传递元素相对于浏览器视图端口的顶部、左侧、高度和宽度坐标

    localToGlobal: function( _el ) {
       var target = _el,
       target_width = target.offsetWidth,
       target_height = target.offsetHeight,
       target_left = target.offsetLeft,
       target_top = target.offsetTop,
       gleft = 0,
       gtop = 0,
       rect = {};

       var moonwalk = function( _parent ) {
        if (!!_parent) {
            gleft += _parent.offsetLeft;
            gtop += _parent.offsetTop;
            moonwalk( _parent.offsetParent );
        } else {
            return rect = {
            top: target.offsetTop + gtop,
            left: target.offsetLeft + gleft,
            bottom: (target.offsetTop + gtop) + target_height,
            right: (target.offsetLeft + gleft) + target_width
            };
        }
    };
        moonwalk( target.offsetParent );
        return rect;
}

您可以尝试：

node.offsetTop-window.scrollY

---

它在定义了视口元标记的Opera上工作。

感谢所有的答案。Prototype似乎已经有了这样一个函数（page（）函数）。通过查看函数的源代码，我发现它首先计算相对于页面的元素偏移位置（即文档顶部），然后从中减去滚动顶部。有关更多详细信息，请参阅prototype的源代码。

现有答案现已过时。本机的

getBoundingClientRect（）

方法已经存在了很长一段时间，并且完全按照问题的要求执行。此外，它还支持所有浏览器（似乎包括IE 5！）

发件人：

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

你这样使用它：

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

---

我假设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);

---

在我的情况下，为了安全起见，我添加了window.scroll到等式：

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

---

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

有时

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));

使用：

---

jQuery非常优雅地实现了这一点。如果查看jQuery的

偏移量的源代码，您会发现基本上是这样实现的：

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

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

函数inViewport（元素）{
让bounds=element.getBoundingClientRect（）；
让viewWidth=document.documentElement.clientWidth；
让viewHeight=document.documentElement.clientHeight；
if（bounds['left']<0）返回false；
if（bounds['top']<0）返回false；
if（bounds['right']>viewWidth）返回false；
if（bounds['bottom']>viewHeight）返回false；
返回true；
}

谢谢你的回答，但我想你误解了我的问题，我知道如何获取元素相对于页面的顶部，我想做的是获取相对于“视口”（即浏览器窗口，而不是文档）的位置。对不起，你使用“视口”让我很困惑。那么，你是说你想考虑浏览器的chrome浏览器，即书签工具栏、位置栏等？不，只是你看到页面的窗口。如果页面被滚动，这将不同于文档顶部，否则它们是相同的。哦，好的，我理解。不知道该怎么做…如果我有什么想法，我会编辑我的答案。我把上面的代码做得有点难看，但它可以工作…使用offsetParent.scrollTopGood decision。最好使用其中一个主要的库，因为它们更可能在浏览器中提供相同的结果。如果你好奇，请检查我的答案。代码会做到这一点，但我不知道它将如何在浏览器上运行。我认为这个问题类似于它有一个非常好的解决方案。@ JakoBrunGE，这是2013的“好”。考虑接受一个解决方案。jQuice是JavaScript。我相信你的意思是“这不是100%的香草/纯JS”。是的，这就是我的意思。当使用浏览器缩放（Android Chrome）时，这可能无法正常工作。来自@rism（）的解决方案在这种情况下是有效的，适用于大多数情况，但它假设元素不在嵌入式iframe中，对吗？问题是询问浏览器窗口的相对位置。el.getBoundingClientRect（）将返回iframe窗口的相对值，而不是浏览器窗口。问题是询问浏览器窗口的相对值。@Denilson
getBoundingClientRect（）。top
不在我的IE11中，它返回0。你有什么解决办法吗？你用
const{top，left}=viewportOffset
把它简化了一点，你不应该增加滚动位置而不是减去它吗？我对答案投了赞成票，但仍然，@lulian Onofrei是对的。请编辑。@Fabio
getBoundingClientRect（）。top
不在我的IE11中，它返回0。您有什么解决办法吗？@Arif
window.scrollY | | window.pageYOffset
可能会有所改进support@FabianvonEllerts：）如果我理解正确，
offsetTop
是相对于最近定位的元素的。根据页面结构的不同，它可能是根元素，也可能不是根元素。这似乎是从文档顶部计算的，而不是从视口计算的
var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

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

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

function inViewport(element) {
    let bounds = element.getBoundingClientRect();
    let viewWidth = document.documentElement.clientWidth;
    let viewHeight = document.documentElement.clientHeight;

    if (bounds['left'] < 0) return false;
    if (bounds['top'] < 0) return false;
    if (bounds['right'] > viewWidth) return false;
    if (bounds['bottom'] > viewHeight) return false;

    return true;
}