如何滚动到溢出的Div中的元素？

Question

我在div内有20个列表项，一次只能显示5个。滚动到第10项然后到第20项的好方法是什么？我知道所有物品的高度。

该scrollTo插件可以做到这一点，但是如果没有真正了解它的源代码，就很难理解。我不想使用这个插件。

比方说，我有一个功能，需要2元$parentDiv，$innerListItem，既不$innerListItem.offset().top也不$innerListItem.positon().top让我对$ parentDiv正确scrollTop的。

Answer 1

这是我自己的插件（会将元素放置在列表的顶部。专门用于overflow-y : auto。可能无法使用overflow-x！）：注意：elem是页面将滚动到的元素的HTML选择器。：由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）中进行了测试。

Answer 2

以上答案将内部元素放置在溢出元素的顶部，即使它在溢出元素内部也是如此。我不希望这样，所以我对其进行了修改，以在元素处于可见状态时不更改滚动位置。jQuery.fn.scrollTo = function(elem, speed) {&nbsp; &nbsp; var $this = jQuery(this);&nbsp; &nbsp; var $this_top = $this.offset().top;&nbsp; &nbsp; var $this_bottom = $this_top + $this.height();&nbsp; &nbsp; var $elem = jQuery(elem);&nbsp; &nbsp; var $elem_top = $elem.offset().top;&nbsp; &nbsp; var $elem_bottom = $elem_top + $elem.height();&nbsp; &nbsp; if ($elem_top > $this_top && $elem_bottom < $this_bottom) {&nbsp; &nbsp; &nbsp; &nbsp; // in view so don't do anything&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; var new_scroll_top;&nbsp; &nbsp; if ($elem_top < $this_top) {&nbsp; &nbsp; &nbsp; &nbsp; new_scroll_top = {scrollTop: $this.scrollTop() - $this_top + $elem_top};&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; new_scroll_top = {scrollTop: $elem_bottom - $this_bottom + $this.scrollTop()};&nbsp; &nbsp; }&nbsp; &nbsp; $this.animate(new_scroll_top, speed === undefined ? 100 : speed);&nbsp; &nbsp; return this;};