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

アンカー リンクのスムーズ スクロールの作成

スムーズ スクロールにより、アンカー リンクを使用してページ内を移動するときのユーザー エクスペリエンスが向上します。この記事では、この効果を達成するための 2 つのアプローチを説明します。1 つは最新のブラウザと互換性のあるネイティブ メソッド、もう 1 つは幅広いサポートのための jQuery 実装です。

最新のブラウザ用のネイティブ メソッド:

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

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

高齢者向けの jQuery メソッドブラウザ:

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

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

注: ID のない要素の場合、次のバリエーションを使用する必要があります:

$('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 に現在のセクションを反映させたい場合は、次のバリエーションを使用します:

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;
});

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