添加元素后，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 does a good job!

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

Answer 3

我的情况我注意到，在我在页面上添加元素之后，浏览器需要一点延迟才能完成呈现元素的新高度。

解决方案是：

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

PS：50是一个特别任意的数字，在我的情况下它只能用0。