Q:

jQuery animated vertical scroll to one element and horizontal to different element at the same time from a single hash tag/variable

I am a jQuery novice but have got really close to achieving my result. Basically what I am trying to do is the following process:
From page load #anchor:

Convert the hash to an ID and a class
Scroll vertical to an element with the anchor ID
Scroll horizontal to a different element with a class

Additionally, the same functionality works when on the page. I am trying to direct link to the url.homl#hash so it is important that the animation effect works on the load as well.
My example is here: http://willminnig.com/stacko/vertical-test-5.html#1908
So far, I can get it to scroll to the vertical ID on page load but not the horizontal class, and also after the pages has loaded perfectly. It will also scroll to the class the very first time after the page loads perfectly, but is erratic behavior after the 1st time.
This is my (messy) jQuery:
$(window).bind("load", function() {

    var mainhash = window.location.href.split("#")[1];

    $('html, body').animate({
        scrollTop: $('#'+mainhash).offset().top
    }, 900, 'swing');       

$('a[href^="#"]').bind('click',function() {

    var target = this.hash; //target is whole #hash
    var whatever = '.pics .'+this.hash.split("#")[1];
    $whatever = $(whatever);
    $target = $(target); //$target is $(#hash)

    $('.pics').animate({ 
        scrollLeft: $whatever.offset().left
    }, 900, 'swing');

    $('html, body').stop().animate({
        scrollTop: $target.offset().top
    }, 900, 'swing');

    window.location.hash = target; //target is whole #hash

});

});
Any expertise explaining what I am doing wrong would be greatly appreciated! Additionally, I could change the way I am scrolling to the elements if it is recommended. The class/ID/hash was just the best I could come up with. Many thanks all!

A:

To trigger the horizontal scroll on load all you need to do is trigger a click on the element with the id equal to 'mainhash'.  You could achieve this by adding this line at the end of your 'load' handler: 
$('#'+mainhash).trigger('click');

As for the erratic scrolling, well, it's a little complicated. $whatever's offset().left is $whatever's distance from the left side of the window, not its distance from the left side of .pics. When .pics .scrollLeft() is 0 (ie., when '1900' is flush to the left) then your animation will work correctly, otherwise it won't. I think the solution is to add the .pics .scrollLeft() amount to $whatever's offset().left so that you will have the value of $whatever's offset from the left side of .pics:
scrollLeft: ($('.pics').scrollLeft() + $whatever.offset().left)

Also, I think the 200% widths you have on #picswrap and .pics are wreaking havoc, though I am unable to explain precisely why. I think they should be changed to 100%.

