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; 

});