动画抵消().左边用散列改变jQuery

Question

我在水平滚动网站工作网站(蓝图)工作很好，动画工作顺利，一切都很好。但是当我想添加window.location.hash与ba-hashchange插件在这种情况下不工作。

$(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');
});

没有hashChange的例子

这里是hashChange with HASH EXAMPLE

基本就是我想做的:

1. 点击导航新建窗口，设置location.hash
函数'hashchange'读取哈希值的插件
2. 和当特定的哈希动画直接"id"

hash:

1. 点击url更改
2. 函数"hashchange"确实工作，因为当你用alert(newHash)代替animate时，它会显示实际的哈希值，动画只是不起作用。
3. 当你把链接与哈希值改变时，它会工作。

请帮我把动画偏移和hashchange结合起来。谢谢你! !

Answer 1

试试这个

为你所有的锚添加一个类".scroll"

示例:<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;
        });
    });

Answer 2

将id更改为data-id并导航到不指定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');
}

祝大家好运