0

#portfolio現在、WordPress ページで「スムーズ スクロール」を使用しており、外部リンクから (アンカー ( ) を使用して) そこからページを開始するときに、要求されたセクションにページをスムーズにスクロールさせようとしています。上部に移動し、ポートフォリオ セクションまでスクロールします。

何が起こっているかというと、「ポートフォリオ セクション」(アンカー ジャンプ) が短時間表示され、その後、一番上にリセットされて下にスクロールします。

コード

$(function() {
    $('.menu li a').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
        $root.animate({
        scrollTop: target.offset().top - 75
        }, 800, 'swing');
            return false;  
            }
        }
    });
});

ページの読み込み

$(window).on("load", function() {
if (location.hash) { // do the test straight away
    window.scrollTo(0, 0); // execute it straight away
    setTimeout(function() {
    window.scrollTo(0, 0); // run it a bit later also for browser compatibility
    }, 1);
}
var urlHash = window.location.href.split("#")[1];
if (urlHash && $('#' + urlHash).length)
    $('html,body').animate({
    scrollTop: $('#' + urlHash).offset().top - 75
    }, 800, 'swing');
});

ページの読み込み時に発生するように見える「ジャンプ」を防ぐにはどうすればよいですか?

HTML - ナビゲーション リンク (ダミー リンクを使用)

<a href="link.com/#portfolio>portfolio</a>

HTML - div

<div id="portfolio></div>
4

1 に答える 1

0

ページ訪問に固有の追加テキストを運ぶようにアンカーを変更することで、ブラウザーの動作を回避できます。以下の例では、最初の 6 行を関数に追加して AnchorSeed 変数を設定し、次にその変数を使用して urlHash 変数を割り当てています。

$(window).on("load", function() {
    var AnchorSeed = new Date() * 1;
    $( ".AnchorUpdate" ).each(
        function() {
            $( this ).attr( "id", this.id + AnchorSeed );
        }
    );
    if (location.hash) { // do the test straight away
        window.scrollTo(0, 0); // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0); // run it a bit later also for browser compatibility
        }, 1);
    }
    var urlHash = window.location.href.split("#")[1] + AnchorSeed;
    if (urlHash && $('#' + urlHash).length)
        $('html,body').animate({
        scrollTop: $('#' + urlHash).offset().top - 75
        }, 800, 'swing');
});

また、ジャンプ先のページ要素に AnchorUpdate クラスを追加する必要があります。これにより、jQuery ルーチンがその要素を見つけて、その ID を AnchorSeed 値で更新できるようになります。この場合、「ポートフォリオ」がそのようなリンクであることがわかっているため、次のように変更されます。

<div class="AnchorUpdate" id="portfolio></div>

これにより、id が「portfolio」から「portfolio1382124849780」のように変更されます (もちろん、ページが読み込まれたときのタイムスタンプによって異なります)。

ページの読み込みが完了すると、ID「ポートフォリオ」は (ソース HTML の一部であっても) 存在しないため、ブラウザーはそれにバウンスするべきではありません。

サーバー変数にアクセスできるかどうかわからなかったので、私は完全に JavaScript を使用しました。そうすれば、コードが読みやすくなるため、好ましい解決策になると思います。可能であれば、ページ カウンター変数、または単にサーバー側のタイムスタンプを使用することもできます。

編集：

コメントで、これは外部リンクでは機能していたが、内部リンクが壊れていると述べました。今はテストをセットアップする時間がありませんが、上記で行われているのと同様に、jQuery ルーチンを追加してこれらの内部リンクを更新するとうまくいくと思います。たとえば、内部リンクは次のとおりです。

<a href="#InternalLink">Jump to Internal Link</a>

更新が必要であることを示す別のクラスを与えることができます。

<a class="InternalLinkUpdate" href="#InternalLink">Jump to Internal Link</a>

次に、jQuery を使用してそのクラスの同様の変更をトリガーします。

$( ".InternalLinkUpdate" ).each(
    function() {
        $( this ).attr( "href", $( this ).attr( "href" ) + AnchorSeed );
    }
);

(現時点では動作中のコードからコピーすることができないため、上記で句読点のエラーなどを行った可能性がありますが、適切に動作させるためにあまり手間をかけるべきではありません。

于 2013-10-18T19:38:50.773 に答える