如何使容器滚动到元素

我有一个包含大量文本的容器,我想自动滚动到该容器中的各种元素。 我可以使用jQuery为容器设置动画,以便很好地滚动一定距离,但是我在确定该距离时遇到了很多麻烦。

我看到的大多数提示建议使用.offset()。top属性来获取该距离,但在这种情况下这不起作用。 看看这个jsfiddle的例子。

注意 :小提琴的目标段落标签是容器的直接子节点,但我不想依赖它。 我希望能够为任何元素获得正确的滚动距离,无论它们有多深的嵌套。

试试这个:

var pOffset = $("#lipsum").scrollTop(); pOffset = pOffset + $("#lipsum p.active").position().top; 

.scrollTop()给出DIV的当前滚动位置,将P元素的位置添加到它,滚动就可以了。

.offset()获取元素相对于整个页面的位置。

你需要的是.position() ,它将获得元素相对于其包含元素顶部的位置。

编辑:这里它与更新的JSFiddle一起使用

编辑2:我刚刚注意到它没有添加滚动位置就无法工作。 您需要从包含div中添加.scrollTop() 。 这是一个更新的JSFiddle 。 (这次工作)