javascript - 如何设置动态定位的div的正确position()

Question

我正在进行 api 调用并在 div 中显示信息。当我运行 $(window).scrollTop($('#div').position().top) 时，它返回 top: 267px 的位置。在浏览器中查看同一个div时，它的位置实际上是top:2058px。

因此，当我运行代码时

window.addEventListener('message',function(event) {
 if(window.location.href.indexOf('?queryParam=') > -1) {   
    $('.button').click(function(){
      $(window).scrollTop($('#div').position().top);
    });
  }
  return;
 },false);

它滚动到 top: 267px 而不是 top: 2058px，其中 div 在浏览器中实际可见。

我的理论是，由于 div 不是静态的，而是通过 api 调用动态拉取，因此在事件监听器中，它仅说明 div 在瞬间​​的定位位置当它被检索但尚未正确放置在浏览器中时。

Answer 1

您正在使用position().top获取 div 的滚动位置。
但这将为您提供 div 相对于其父元素的位置。
虽然在其他情况下非常方便，但在您的情况下它并没有给出所需的值。

在您的情况下，您需要 div 相对于 window 的位置，因为您正在滚动的是 window。
为此，您需要使用 offset().top ，这将为您提供元素相对于文档的位置，无论元素在页面上的结构如何:

$(window).scrollTop($('#div').offset().top);