ホームページ >ウェブフロントエンド >jsチュートリアル >アンカー リンクを使用してスムーズなスクロールを実現するにはどうすればよいですか?
アンカー リンクをクリックしたときのスムーズなスクロール
アンカー リンクを含む 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 サイトの他の関連記事を参照してください。