1

私は水平スクロール Web サイト (青写真) に取り組んでいます。非常にうまく機能し、アニメーションはスムーズに動作し、すべてがうまくいきます。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 WITH HASHの例があります

基本的に私がやりたいこと:

  1. クリックすると nav new window.location.hash が設定されます
  2. 関数「hashchange」を持つプラグイン読み取りハッシュ
  3. そして、特定のハッシュが「id」を指示するようにアニメーション化するとき

ハッシュで何が起こっているか:

  1. クリック時の URL の変更
  2. 関数「hashchange」が機能するのは、代わりに alert(newHash) をアニメーション化すると、実際のハッシュが表示され、アニメーションが機能しないためです。
  3. ハッシュが変更されたリンクを配置すると、HASH CHANGED SERVER PATH/#portfolioが機能します

アニメーションオフセットとハッシュチェンジを組み合わせるのを手伝ってください。ありがとうございました!!

4

2 に答える 2

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;
        });
    });
于 2013-06-01T13:27:51.253 に答える