为什么我的 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

好的。我看到一件事，但我不确定它是否能解决所有问题。

将您的点击事件处理程序更改为以下代码。您设置 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;  

});