Scroll A Div Vertically To A Desired Position Using Jquery

This is a followup question for this: Scrollpane on the bottom, css is hacky, javascript is hard I ended up doing the scrolling in the same way explained in the accepted answer. No

Solution 1:

It's not jQuery, just JavaScript, and I've actually never used it all, so I'm not sure how you would have to mess with it to get it to work in this situation, but there is a scrollIntoView function:

yourElement.scrollIntoView();

Solution 2:

Since the elements have a fixed width, you can count the number of elements by using .index() + 1, and animate to this value (after subtracting the container's width).

If you want the element to be centered, use - Math.round(middle.width()/100)*50.

Fiddle: 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);

Usage:

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

Solution 3:

Something along these lines would be a good start: http://jsfiddle.net/vHjJ4/

This will bring the target into the centre of the carousel. I think you will have to add in some extra checks to make sure that it didn't scroll to far, for example if you targeted the first or last element...unless this is built into the scroll function (it might be).

Solution 4:

I'm not sure I understand your question exactly, but it sounds like you're asking how to scroll horizontally to the selected item in the bottom pane. If so, try something like this:

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

From here, you can use the width of middle to center the item if needed.