如何获得一个元素相对于浏览器窗口的顶部位置？
我想获取元素相对于浏览器窗口（显示页面的视口，而不是整个页面）的位置。 这怎么能在JavaScript中完成？
非常感谢
现有的答案现在已经过时了。 原生的getBoundingClientRect()方法已经存在了很长一段时间，并且正是问题所要求的。 另外它支持所有的浏览器（包括IE 5，似乎！）
从MDN页面 ：
返回的值是一个TextRectangle对象，其中包含只读左侧，顶部，右侧和底部属性，以像素为单位，左上angular相对于视口的左上angular 。
你这样使用它：
var viewportOffset = el.getBoundingClientRect(); // these are relative to the viewport, ie the window var top = viewportOffset.top; var left = viewportOffset.left;
编辑：添加一些代码来说明页面滚动。
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文章 。
在我的情况下，为了安全的滚动，我添加了window.scroll公式：
var element = document.getElementById('myElement'); var topPos = element.getBoundingClientRect().top + window.scrollY; var leftPos = element.getBoundingClientRect().left + window.scrollX;
这使我可以在文档上获取元素的真实相对位置，即使它已经滚动。
你可以试试：
node.offsetTop - window.scrollY
它在Opera上使用视口元标记定义。
我已经成功地使用下面的代码来获得相对于屏幕的左侧和顶部。 它不是100％的JavaScript，因为它使用jQuery。
在下面的代码中，我假设网页中存在一个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);
此页面上的函数将返回一个矩形，其中传入元素的顶部，左侧，高度和宽度坐标相对于浏览器视图端口。
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; }
感谢所有的答案。 看来Prototype已经有了一个这样的function（page（）函数）。 通过查看函数的源代码，我发现它首先计算相对于页面（即文档顶部）的元素偏移位置，然后从中减去scrollTop。 有关更多详细信息，请参阅原型的源代码。
