アンカー リンクを使用してスムーズなスクロールを実現するにはどうすればよいですか?

アンカー リンクをクリックしたときのスムーズなスクロール

アンカー リンクを含む Web ページをナビゲートするとき、ユーザーはターゲット セクションへのシームレスな遷移を期待します。ただし、デフォルトのスクロール動作は突然になる場合があります。この記事では、アンカー リンクをクリックしたときにスムーズなスクロールを実現するテクニックについて説明します。

ネイティブ サポート

Chrome や Firefox などのブラウザでは、スムーズ スクロールのネイティブ サポートが導入されています。これは、ビューにスクロールするときに値「smooth」を持つ「behavior」プロパティを使用して実装されます。

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

jQuery プラグイン

古いブラウザの場合は、jQuery プラグインスクロールアニメーションを滑らかにすることができます。この手法では、「animate」メソッドを使用してページをターゲット セクションに移動します。

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

拡張手法

ターゲット要素に ID がない場合、次のようになります。変更された jQuery プラグインを使用できます:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

パフォーマンス最適化

変数内で「$('html, body')」セレクターをキャッシュするとパフォーマンスが向上します:

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

URL ハッシュの保持

スムーズスクロール時に URL ハッシュを更新するには、「animate」を使用します。 callback:

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

これらの手法のいずれかを実装すると、アンカー リンクを使用してページを移動するときに、洗練されたユーザー フレンドリーなスクロール エクスペリエンスを提供できます。

以上がアンカー リンクを使用してスムーズなスクロールを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。