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

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

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

比方说，我有一个功能，需要2元$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是页面将滚动到的元素的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）中进行了测试。

如果要滚动整个页面，请检查此问题。

我已经调整了Glenn Moss的答案，以说明以下事实：溢出div可能不在页面顶部。

parentDiv.scrollTop(parentDiv.scrollTop() + (innerListItem.position().top - parentDiv.position().top) - (parentDiv.height()/2) + (innerListItem.height()/2)  )

我在带有响应模板的google maps应用程序上使用了它。分辨率> 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;
};

我写这两个函数使我的生活更轻松：

function scrollToTop(elem, parent, speed) {
    var scrollOffset = parent.scrollTop() + elem.offset().top;
    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

function scrollToCenter(elem, parent, speed) {
    var elOffset = elem.offset().top;
    var elHeight = elem.height();
    var parentViewTop = parent.offset().top;
    var parentHeight = parent.innerHeight();
    var offset;

    if (elHeight >= parentHeight) {
        offset = elOffset;
    } else {
        margin = (parentHeight - elHeight)/2;
        offset = elOffset - margin;
    }

    var scrollOffset = parent.scrollTop() + offset - parentViewTop;

    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

并使用它们：

scrollToTop($innerListItem, $parentDiv, 200);
// or
scrollToCenter($innerListItem, $parentDiv, 200);

在玩了很长时间之后，这就是我的想法：

    jQuery.fn.scrollTo = function (elem) {
        var b = $(elem);
        this.scrollTop(b.position().top + b.height() - this.height());
    };

我这样称呼它

$("#basketListGridHolder").scrollTo('tr[data-uid="' + basketID + '"]');