如何使容器滚动到元素 [英] how to make container scroll to element

问题描述

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

I've got a container with a whole bunch of text in it and i want to auto-scroll to various elements in that container. I can animate the container using jQuery to scroll a certain distance nicely, however I am having a lot of trouble determining what that distance is.

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

Most of the hints I see recommend using the .offset().top property to get that distance, but that isn't working in this case. Have a look at this jsfiddle for an example.

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

NOTE: the fiddle targets paragraph tags that are direct children of the container, but I don't want to rely on that. I want to be able to get the proper scroll distance for any elements, no matter how deeply nested they may be.

推荐答案

尝试使用这个：

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

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

.scrollTop() gives the current scroll position of the DIV, add the position of the P element to it and scrolling will be fine.

这篇关于如何使容器滚动到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！