ScrollTo（）的頁面導航如何不在右頁？ （jQuery）

Question

我正在處理我的投資組合，我正在使用ScrollTo jQuery插件讓訪問者瀏覽頁面。我得到了所有的工作，但我也想實現一個鏈接，您可以從一個頁面滾動到另一個頁面，就像prev next page，並且每個頁面都必須有所不同。

我也有工作，但不知何故，它顯示錯誤的網頁上的錯誤鏈接。 例如：第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); 
} } 

所以，每當一個鏈接被點擊的pagenav點擊a.link被調用時，將被重新繪製。我爲此使用了以下功能。

$('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

好的。我看到一件事，但我不確定它是否能解決所有問題。

將您的點擊事件處理程序更改爲以下代碼。您設置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; 

});