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

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

ヘルプ セクション内に FAQ へのハイパーリンクを組み込むことは、ユーザーを特定の情報に誘導する一般的なアプローチです。アンカー リンクを使用すると、目的の場所までページをスクロールできますが、スムーズなスクロール エクスペリエンスを実現することで、ユーザー インタラクションを強化できます。

ネイティブおよび jQuery ベースのソリューション

ブラウザの最新バージョンスムーズなアンカー スクロールのためのネイティブ ソリューションをサポートするようになりました。

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

    document.querySelector(anchor.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);
});

さらに、jQuery はターゲット要素に 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;
});

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