jquery - 使用哈希更改 jQuery 动画 offset().left

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 的实时示例没有 HASH 示例的实时示例

这是 hashChange和 HASH 示例

基本上我想做的事情：

1. 单击导航新窗口.location.hash 已设置
2. 具有函数“hashchange”的插件读取哈希
3. 当特定的哈希动画直接“id”

哈希发生了什么：

1. 点击网址更改时
2. 函数“hashchange”确实有效，因为当你将警报（newHash）改为动画时，它会显示实际的哈希，动画就不起作用。
3. 当您放置带有哈希更改的链接时，它可以工作HASH CHANGED SERVER PATH/#portfolio

请帮我将动画偏移与 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 并导航到 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');
}

祝大家好运:)