jquery - 添加元素后 position().top 不会改变

Question

所以我在这样的 div 中有一个 div

<div id="container"> 
<div id="bottom"> </div>
</div> 

容器是绝对定位的。

我正在使用 .before() 添加元素

$("#bottom").before('<p>Some Paragraph</p>');

然后我试图向下滚动到容器的底部

$("#container").scrollTop($('#bottom').position().top);

它工作了一段时间，然后停止工作。

如果我打印“$('#bottom').position().top”，我看到它会增加到某个点然后停止。

我这样做的原因是因为我在滚动之前也有一个动画，它与动画配合得很好，但正如我所说的那样。

我想出的唯一临时解决方案是这个（基本上放了一些大数字）。

 $("#container").scrollTop(10000000);

Answer 1

使用offset()代替position()：

$("#container").scrollTop($('#bottom').offset().top);

见：http ://api.jquery.com/offset/

Answer 2

使用插件进行滚动怎么样？

Jquery ScrollTo 做得很好！

$(...).scrollTo( $('#container'), timeInMs );

Answer 3

在我的案例中，我注意到在页面上添加元素后，浏览器需要一点延迟才能完成元素的新高度的渲染。

解决方案是：

setTimeout(function(){
    $("#container").scrollTop($('#bottom').position().top);
}, 50);

PS.：50 是一个特别随意的数字，在我的情况下它只适用于 0。