如何使容器滚动到元素答案

【问题标题】：how to make container scroll to element如何使容器滚动到元素
【发布时间】：2012-05-03 18:33:15
【问题描述】：

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

我看到的大多数提示都建议使用 .offset().top 属性来获得该距离，但这在这种情况下不起作用。 Have a look at this jsfiddle for an example.

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

【问题讨论】：

【解决方案1】：

试试这个：

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

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

【讨论】：

+1 在第一次而不是在 2 次编辑后得到正确答案 XD。
谢谢 - 在小提琴和我的实际项目中工作。但我认为还有更多：我惊讶地发现即使 $('.active') 嵌套在其他元素中也能正常工作。例如，在
quick brown fox..
中，我希望 .position().top 返回跨度在段落标签中的位置（只是几个像素）。然而，它似乎返回了相对于父 div 的跨度位置 - 知道为什么吗？
嗯。我确实看到，当我删除滚动容器上的相对定位时，定位似乎中断了。我在文档中没有看到任何指示，但也许 .position() 会沿着 DOM 向上移动到第一个定位的元素？

【解决方案2】：

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

您需要的是.position()，它会为您提供元素相对于其包含元素顶部的位置。

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

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

【讨论】：