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

スムーズ スクロールによるアンカー リンク ナビゲーションの強化

スムーズ スクロールにより、アンカー リンクを使用して Web ページ内を移動するときのユーザー エクスペリエンスが大幅に向上します。不快なジャンプを排除し、シームレスな遷移を提供することで、ページのアクセシビリティと全体的な美しさが向上します。

ネイティブ JavaScript の使用

主要ブラウザの最近のバージョンでは、アンカー リンクのネイティブ スムーズ スクロールがサポートされるようになりました。この機能は、次のコードを使用して実装できます。

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

jQuery ソリューション

古いブラウザとの互換性のために、jQuery は信頼できるソリューションを提供します。

$(document).on('click', 'a[href^="#"]', event => {
  event.preventDefault();
  $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500);
});

ターゲット要素の処理ID なし

ターゲット要素に 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 を更新するには、次のコードをcallback:

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

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

これらのテクニックを組み込むことで、Web サイトのユーザーにシームレスで魅力的なナビゲーション エクスペリエンスを提供し、ページのコンテンツ内を楽しくナビゲートできるようになります。

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