这是一个使用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));
}

如果您使用jQuery，这可能是一个简单的解决方案：

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>

我发现的最干净的方法是jQuery的偏移所使用的技术的简化版本。与其他一些答案类似，它从getBoundingClientRect开始；然后，它使用窗口和documentElement来调整滚动位置以及正文上的边距（通常是默认值）。

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els=文档.getElementsByTagName（“div”）；var docEl=文档.documentElement；对于（var i=0；i<els.length；i++）{var rect=els[i].getBoundingClientRect（）；var rectTop=rect.top+window.pageYOffset-docEl.clientTop；var rectLeft=rect.left+window.pageXOffset-docEl.clientLeft；els[i].innerHTML=“<b>”+rectLeft+“，”+rectTop+“</b>”；}第二部分{宽度：100px；高度：100px；背景色：红色；边框：1px实心黑色；}#相关{位置：相对；左：10px；顶部：10px；}#绝对值{位置：绝对；顶部：250px；左：250px；}<div id=“rel”></div><div id=“abs”></div><div></div>

我成功地使用Andy E的解决方案，根据用户单击的表行中的链接来定位引导2模式。该页面是Tapestry 5页面，下面的javascript被导入到java页面类中。

javascript代码：

function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset   = elemRect.top - bodyRect.top;
offset   = offset + 20;
$('#serviceLineModal').css("top", offset);

}

我的模式代码：

<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static" 
 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>

<div class="modal-body">
    <t:zone t:id="modalZone" id="modalZone">
        <p>You selected service line number: ${serviceLineNumberSelected}</p>
    </t:zone>
</div>

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <!-- <button class="btn btn-primary">Save changes</button> -->
</div>

循环中的链接：

<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">       
    <td style="white-space:nowrap;" class="add-padding-left-and-right no-border"> 
        <a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber" 
            t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
            onmouseover="setLinkPosition(this);">
            <i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
        </a>
    </td>

页面类中的java代码：

void onServiceLineNumberSelected(String number){
    checkForNullSession();
    serviceLineNumberSelected = number;
    addOpenServiceLineDialogCommand();
    ajaxResponseRenderer.addRender(modalZone);
}

protected void addOpenServiceLineDialogCommand() {
    ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
        @Override
        public void run(JavaScriptSupport javascriptSupport) {
            javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
        }
    });
}

希望这对某人有所帮助，这篇文章帮了大忙。

此函数返回元素相对于整个文档（页面）的位置：

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

使用此选项，我们可以获得X位置：

getOffset(element).left

…或Y位置：

getOffset(element).top

我可以像element.offsetLeft或element.ooffsetTop一样。示例：document.getElementById（'profileImg'）.offsetLeft