如何滚动到溢出的Div中的元素？
我在一个div中有20个列表项，一次只能显示5个。滚动到项目#10，然后滚动到项目#20的好方法是什么？我知道所有物品的高度。
scrollTo插件可以做到这一点，但如果不真正深入其中，其源代码并不容易理解。我不想使用这个插件。
假设我有一个函数，它有两个元素$parentDiv，$innerListItem，$innerListItem.offset().top和$innerListItem.positon().top都没有给出$parentDiv的正确scrollTop。
回答 7
Stack Overflow用户
发布于 2011-03-11 07:06:56
$innerListItem.position().top实际上是相对于其第一个定位祖先的.scrollTop()而言的。因此，计算正确的$parentDiv.scrollTop()值的方法是从确保$parentDiv的位置开始。如果它还没有显式的position，可以使用position: relative。元素$innerListItem及其在$parentDiv之前的所有祖先不需要具有显式位置。现在，您可以使用以下命令滚动到$innerListItem：
// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);
// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
- $parentDiv.height()/2 + $innerListItem.height()/2);Stack Overflow用户
发布于 2013-09-21 09:24:50
这是我自己的插件(会把元素放在列表的顶部。专门为overflow-y : auto设计的。可能不适用于overflow-x!)：
HTML：elem是页面将滚动到的元素的选择器。jQuery支持的任何东西，比如：#myid、div.myclass、$(jquery object)、dom对象等。
jQuery.fn.scrollTo = function(elem, speed) {
$(this).animate({
scrollTop: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top
}, speed == undefined ? 1000 : speed);
return this;
};如果不需要设置动画，请使用：
jQuery.fn.scrollTo = function(elem) {
$(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top);
return this;
};使用方法：
$("#overflow_div").scrollTo("#innerItem");
$("#overflow_div").scrollTo("#innerItem", 2000); //custom animation speed 注意：#innerItem可以在#overflow_div中的任何位置。它不一定非得是一个直接的子级。
在Firefox (23)和Chrome (28)中测试。
如果您想滚动整个页面，请选中this question。
Stack Overflow用户
发布于 2013-02-16 05:47:47
我调整了Glenn Moss的答案，以考虑到overflow div可能不在页面顶部的事实。
parentDiv.scrollTop(parentDiv.scrollTop() + (innerListItem.position().top - parentDiv.position().top) - (parentDiv.height()/2) + (innerListItem.height()/2) )我在一个带有响应式模板的google地图应用程序上使用了它。当分辨率> 800px时，列表位于地图的左侧。在分辨率< 800的情况下，该列表位于地图下方。
https://stackoverflow.com/questions/2346011
复制相似问题