Question

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.

Now there is a request that one item is selected somehow (eg. as an url parameter or by some javascript calls) I should scroll the pane to the item with the corresponding ID in the scrollpane. Like a link to an anchor () would work!

I want to make a javascript call like this

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

But this is not in jQuery (or at least I don’t know of it). So is there a way to make it?

I’ll post a simple jsFiddle here:
http://jsfiddle.net/ruisoftware/U6QdQ/4/

Help me write that scrollTo function!

A .animate would be fine too.

UPDATE: If it was not clear I would like it to only align to the left or right side of the panel, it it was overflowed on that side (so the minimum possible amount of scrolling happens)

Answer 1

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();