为什么我的ScrollTo（）页面导航不在右侧页面？ （jQuery的）

Question

我正在研究我的投资组合，我正在使用ScrollTo jQuery插件让访问者浏览页面。我得到了所有工作，但我也想实现一个链接，你可以从一个页面滚动到另一个页面，如一个prev下一页，并在每个页面上必须是不同的。

我也有这个工作但不知何故它在错误的页面上显示错误的链接。 例如：第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;  

});