jQuery とネイティブ JavaScript を使用してアンカーリンクのスムーズスクロールを実装するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-18 15:42:11

オリジナル

491 人が閲覧しました

How Can I Implement Smooth Scrolling for Anchor Links Using jQuery and Native JavaScript?

アンカーリンクによるスムーズなスクロール

アンカーリンクを利用してユーザーを Web ページの特定のセクションに誘導する場合、スムーズなスクロールエクスペリエンスによりユーザーのアクセシビリティとエンゲージメントが向上します。 jQuery には、この効果を実現するための組み込み機能が用意されています。

jQuery テクニック

jQuery を使用してスムーズなスクロールを開始するには、次のコードを使用します。

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

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

ログイン後にコピー

ネイティブアプローチ (モダン)ブラウザ)

最新のブラウザは、アンカーリンクのネイティブスムーズスクロールをサポートするようになりました。この動作を次のコードで実装します。

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

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

ログイン後にコピー

追加の考慮事項

ID 属性なし: ターゲット要素に ID 属性がないが、名前で識別される場合は、次を使用します。このコード:

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

    return false;
});

ログイン後にコピー

パフォーマンス最適化: ドキュメントルートセレクターをキャッシュしてパフォーマンスを向上させます:

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

ログイン後にコピー

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