Scroll to active item

Question

I'm trying to build a site that uses the jquery scrollable-tool for a portfolio. I have a scrollable list that links to different pages that show examples of our work. The scrollable list is included in every page via PHP (I think this could be much more elegant, but I'm not so fit to do it). The scrollable list gets a .active class on li if the concerning page is shown. Then the visible part of the scrollable list should jump to the active list item and the scrollable should start from there.

Now I first tried to fixed it via combination with the scrollTo-function. But then the last ul with its li will not be shown (I have 5 ul with 5 li items). Furthermore the scrollable begins to behave strangely. I sometimes have no list items visible in the scrollable div.

This is my code:

    $(document).ready(function(){
// initialize scrollable
$(".scrollable").scrollable({
    mousewheel: true,
    circular: true,
    loop:true
});
$(".scrollable").scrollTo($("li.active"), 800, {axis:"x"} );
    });

I also tried it with initialIndex but this also didn't work very well and didn't have the nice scrollTo-Effect.