Animate offset().left with hash change jQuery

Question

I'm working on horizontal scrolling website Website (blueprint) working very well, animation work smooth and everythings fine. But when I want to add window.location.hash with ba-hashchange plugin in this case does not work.

$(document).ready(function(){

$("nav").delegate("a", "click", function(event) {
    window.location.hash =  $(this).attr("href");
    return false;      
});

var newHash      = "";
$(window).bind('hashchange', function(){

    newHash = window.location.hash;
    if (newHash) {
        $('body,html').stop().animate({
            scrollLeft: $(newHash).offset().left
        }, 2500,'easeInOutExpo');
    };

});

    $(window).trigger('hashchange');
});

Here's live example without hashChange WITHOUT HASH EXAMPLE

And here's with hashChange WITH HASH EXAMPLE

Basicly what i want to do:

1. On Click nav new window.location.hash is set
2. plugin with function 'hashchange' read hash
3. and when specific hash animate to direct "id"

What's happening with hash:

1. On Click url changes
2. function "hashchange" does work because when u put alert(newHash) instead animate it shows actual hash, animation just does not work.
3. when u put link with hash changed it works HASH CHANGED SERVER PATH/#portfolio

Please help me to combine animation offset with hashchange. Thank you!!

Answer 1

Change id to data-id and navigate to not strick id

var adres = location.hash.substring(1);


if (newHash) {
            $('html, body').stop().animate({
                scrollTop: $("div[data-id='" + adres + "']").offset().top,
                scrollLeft: $("div[data-id='" + adres + "']").offset().left
            }, 1500,'easeInOutExpo');
}

Good luck all :)

Answer 2

Try This one

add a class to all your anchors ".scroll"

example: <a href="#main" class="scroll">Home</a>

$(document).ready(function(){
     var newHash  = "";
        $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();
        var full_url = this.href;
        var parts = full_url.split("#");
        var trgt = parts[1];
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;
        $('html, body').animate({scrollTop:target_top}, 1500,function(){window.location.hash = "#"+trgt;});
     return false;
        });
    });