如何滚动到溢出的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) {

    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;

};