はてなブックマーク

JavaScriptを使った、実用的なスムーススクロールの実装方法を詳しくご紹介します。 固定ヘッダーによる重なりや、遅延読み込みによる位置ずれへの対策も含まれているので、これ一つで多くのケースに対応可能です。 もちろん、ページ内リンクだけでなく、別ページから遷移した際のスクロールにも対応しています。 滑らかな操作感を重視し、イージングには「easeOutExpo」を採用しました。 // ヘッダー情報 const header = document.querySelector(".fixed-header"); const headerHeight = header ? header.offsetHeight + 20 : 0; // ページ内のスムーススクロール for (const link of document.querySelectorAll('a[href*="#"]')) {