1

現在、ポートフォリオに取り組んでおり、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がクリックされると呼び出されるため、リンクがクリックされるたびにページナビゲーションが再描画されます。これには次の関数を使用しました。

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

});

うまくいけば、あなたの誰もがこの問題で私を助けて、私のためにそれを整理することができます。よろしくお願いします;）

4

1 に答える 1

0

わかった。私は一つのことを見ますが、それがすべてを修正するかどうかはわかりません。

クリックイベントハンドラーを以下のコードに変更します。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;  

});
于 2012-04-23T19:43:38.613 に答える