Animate offset()。left with hash change jQuery

时间:2013-06-01 13:16:10

标签: jquery animation hash offset hashchange

我正在横向滚动网站上工作 网站(蓝图)工作得很好,动画工作顺利,万事如意。 但是,如果我想在这种情况下添加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 WITHOUT HASH EXAMPLE

的实例

这里有hashChange WITH HASH EXAMPLE

基本上我想做的事情:

  1. 点击导航新窗口。位置设置为
  2. 插件功能' hashchange'读哈希
  3. 当特定哈希动画指向" id"
  4. 哈希发生了什么:

    1. 点击网址更改
    2. function" hashchange"确实有效,因为当你把alert(newHash)改为动画时,它会显示实际的哈希,动画就不起作用了。
    3. 当你把链接与哈希改变时,它会有效HASH CHANGED SERVER PATH/#portfolio
    4. 请帮我把动画偏移与hashchange结合起来。 谢谢!!

2 个答案:

答案 0 :(得分:0)

试试这个

为所有主题添加一个类“ .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;
        });
    });

答案 1 :(得分:0)

将ID更改为data-id并导航至不strid 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');
}
祝你好运:)