javascript - 如何使容器滚动到元素

Question

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

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

注意：小提琴的目标是作为容器直接子级的段落标签，但我不想依赖它。我希望能够为任何元素获得适当的滚动距离，无论它们嵌套的深度如何。

score 6 · Accepted Answer

尝试使用这个：

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

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

score 4 · Accepted Answer

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

您在这里需要的是.position()让您获得元素相对于其包含元素顶部的位置。

编辑：在这里它适用于更新的JSFiddle

编辑2：我只是注意到如果不添加滚动位置它就无法工作。您需要.scrollTop()从包含的 div 添加。这是一个更新的JSFiddle。（这次有效）

2 回答 2