如何滚动到溢出的Div内的元素？
我有一个div里面只能显示5个的20个列表项。 滚动到项目＃10和项目＃20的好方法是什么？ 我知道所有物品的高度。
scrollTo插件可以做到这一点，但是它的源代码并不是非常容易理解，而不需要真正进入。 我不想使用这个插件。
比方说，我有一个函数需要两个元素： $parentDiv ， $innerListItem ， $innerListItem.offset().top和$innerListItem.positon().top给了我$ parentDiv的正确的scrollTop。
$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);
这是我自己的插件（将元素放置在列表的顶部，特别是对于overflow-y : auto ，可能不适用于overflow-x ！）：
注意 ： elem是页面将被滚动到的元素的HTMLselect器。 任何支持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; };
如果你不需要animation，那么使用：
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任何地方。 它并不一定是一个直接的孩子。
testingFirefox（23）和Chrome（28）。
如果你想滚动整个页面，请检查这个问题 。
我已经调整了Glenn Moss的回答，以说明溢出div可能不在页面的顶部。
parentDiv.scrollTop(parentDiv.scrollTop() + (innerListItem.position().top - parentDiv.position().top) - (parentDiv.height()/2) + (innerListItem.height()/2) )
我在谷歌地图应用程序上使用这个响应模板。 在分辨率> 800px上，列表位于地图的左侧。 在<800分辨率下，列表在地图下方。
上面的答案将内部元素放置在溢出元素的顶部，即使它在溢出元素内部。 我不想这样做，所以我修改它不改变滚动的位置，如果元素在视图中。
jQuery.fn.scrollTo = function(elem, speed) { var $this = jQuery(this); var $this_top = $this.offset().top; var $this_bottom = $this_top + $this.height(); var $elem = jQuery(elem); var $elem_top = $elem.offset().top; var $elem_bottom = $elem_top + $elem.height(); if ($elem_top > $this_top && $elem_bottom < $this_bottom) { // in view so don't do anything return; } var new_scroll_top; if ($elem_top < $this_top) { new_scroll_top = {scrollTop: $this.scrollTop() - $this_top + $elem_top}; } else { new_scroll_top = {scrollTop: $elem_bottom - $this_bottom + $this.scrollTop()}; } $this.animate(new_scroll_top, speed === undefined ? 100 : speed); return this; };
玩了很长时间之后，我想到了这一点：
jQuery.fn.scrollTo = function (elem) { var b = $(elem); this.scrollTop(b.position().top + b.height() - this.height()); };
我这样称呼
$("#basketListGridHolder").scrollTo('tr[data-uid="' + basketID + '"]');
