ScrollTo（）を使用したページナビゲーションが正しいページに表示されないのはなぜですか？ （jQuery）

Question

私は現時点で自分のポートフォリオに取り組んでいます。私はScrollTo jQueryプラグインを使用して、訪問者がページをナビゲートできるようにしています。私はそれがすべて動作しているが、私はまた、前の次のページのように、あるページから別のページにスクロールできるリンクを実装したいと思っていました。

私はそれも動作していますが、どういうわけか間違ったページに間違ったリンクが表示されます。 例：ページ2にはページ1のリンクがあり、ページ3にはページ2のリンクがあります。 そして、そのリンクを再度クリックすると、リンクが正しいものに変わります。

あなたはここでそれをチェックアウトすることができます：http://machimedia.nl/portfolio/

は、これは私が使用する関数です：

function reloadPageNav(){ 
var section1Top = 0; 
// The top of each section is offset by half the distance to the previous section. 
var section2Top = $('#portfolio').offset().left - (($('#aboutme').offset().left - $('#portfolio').offset().left)/2); 
var section3Top = $('#aboutme').offset().left - (($(document).width() - $('#aboutme').offset().left)/2);; 

if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){ 
    $('nav#homenav').delay(1000).fadeIn(800); 
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){ 
    $('nav#portfolionav').delay(1000).fadeIn(800); 
} else if ($(document).scrollTop() >= section3Top){ 
    $('nav#aboutmenav').delay(1000).fadeIn(800); 
} } 

そしてa.linkがクリックされたときにリンクがpagenavをクリックされるたびになるよう、それが呼び出され、再描画されます。私はこれに以下の関数を使用しました。

$('a.link').click(function() { 
    $('#wrapper').scrollTo($(this).attr('href'), 1500); 
    //setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px') 
    //setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px') 
    $('a.link').removeClass('selected'); 
    $(this).addClass('selected'); 

    $('nav.next').fadeOut(500); 
    $('nav.prev').fadeOut(500); 
    reloadPageNav(); 
    homeNav(); 
    return false; 

}); 

この問題を解決して、私のために助けてくれることを願ってください。 ご協力いただきありがとうございます;）

Answer 1

OK。私は1つのことを見るが、それがすべてを修正するかどうかは分からない。

クリックイベントハンドラを以下のコードに変更してください。 reloadPageNav関数の設定方法は、既に新しい場所にスクロールしていることを前提としています。しかし、scrollToは非同期で実行されるため、おそらくその時間までには行われません。以下のコードでは、reloadPageNavをscrollTo ...のコールバック関数に移動します。スクロールが完了するまで呼び出されません。

$('a.link').click(function() { 
    $('#wrapper').scrollTo($(this).attr('href'), 1500, {onAfter: function(){reloadPageNav();}}); 
    $('a.link').removeClass('selected'); 
    $(this).addClass('selected'); 

    $('nav.next').fadeOut(500); 
    $('nav.prev').fadeOut(500); 
    homeNav(); 
    return false; 

});