使用jQuery将div垂直滚动到所需位置

Question

这是一个后续问题： Scrollpane on the bottom, css is hacky, javascript is hard

我最终以接受的答案中解释的相同方式进行滚动。

现在有一个请求以某种方式选择一个项目（例如，作为url参数或通过一些javascript调用）我应该将窗格滚动到滚动窗格中具有相应ID的项目。就像一个锚（）的链接可以工作！

我想像这样进行javascript调用

function scrollTo(id) {
    $('#middle').magicallyScrollThatItemWouldBeVisible(itemid);
}

但这不是jQuery（或者至少我不知道它）。那么有没有办法实现呢？

我将在这里发布一个简单的jsFiddle： http://jsfiddle.net/ruisoftware/U6QdQ/4/

帮我写一下scrollTo函数！

.animate也可以。

更新：如果不清楚，我希望它只对齐到面板的左侧或右侧，它在那一侧溢出（因此滚动的最小可能发生）

Answer 1

这不是jQuery，只是JavaScript，我实际上从来没有使用过它，所以我不确定你是如何在这种情况下让它工作的，但是有一个{{3功能：

yourElement.scrollIntoView();

Answer 2

由于元素具有固定的宽度，您可以使用.index() + 1计算元素的数量，并为此值设置动画（在减去容器的宽度之后）。

如果您希望元素居中，请使用- Math.round(middle.width()/100)*50。

小提琴：http://jsfiddle.net/U6QdQ/17/

//This code should be run on load / DOMReady
(function($){ //Run on load / DOMReady
    $.fn.magicScrollTo = function(){
        var middle = $("#middle");
        var currentScrollLeft = middle.scrollLeft();
        var width = middle.width();
        var newScrollLeft = this.offset().left + currentScrollLeft - middle.offset().left;
        if(newScrollLeft >= currentScrollLeft && newScrollLeft <= currentScrollLeft + width - this.outerWidth()) return;
        if(newScrollLeft > currentScrollLeft){ //If the element is at the right side
            newScrollLeft = newScrollLeft - width + this.outerWidth();
        }
        middle.animate({
            scrollLeft: newScrollLeft,
        }, 'fast')
    }
})(jQuery);

用法：

//Select the 4rd element, and scroll to it (eq is zero-based):
$('.item').eq(3).magicScrollTo();

Answer 3

这些方面的东西将是一个良好的开端： http://jsfiddle.net/vHjJ4/

这会将目标带入旋转木马的中心。我认为你必须添加一些额外的检查，以确保它不会滚动到远，例如，如果你的目标是第一个或最后一个元素......除非这是内置到滚动功能（它可能是）。

Answer 4

我不确定我是否完全理解您的问题，但听起来您问的是如何水平滚动到底部窗格中的所选项目。如果是这样，尝试这样的事情：

//get the position of the element relative to the parent ("middle")
var pos = $("#itemid").position(); 
if (pos){
    $("#middle").scrollLeft(pos.left);
}

从这里开始，如果需要，您可以使用middle的宽度将项目居中。