HPBUILD

「ページ内リンクをクリックしたとき、ふわっと目的地までスクロールさせたい」──そんなときに便利なのがスムーススクロールです。jQueryを使わなくても、JavaScriptだけで簡単に実装できます。 スムーススクロールとは？ スムーススクロールとは、ページ内リンクをクリックした際に、瞬間的に移動するのではなく、ゆっくりと滑らかにスクロールするアニメーションを指します。 HTMLの基本構造 まずはページ内リンクの例を確認しましょう。 コピー <a href="#section2">セクション2へ移動</a> <div id="section2"> ここが目的地！ </div> JavaScriptでスムーススクロールを実装 scrollIntoView()を使うと、スムースに目的地へ移動できます。 コピー document.addEventListener("DOMContentLoaded", () => { const links = document.querySelectorAll('a[href^="#"]'); links.forEach(link => { link.addEventListener("click", e => { e.preventDefault(); const targetId = link.getAttribute("href").substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth" }); } }); }); }); ポイント解説 e.preventDefault()：通常のジャンプ挙動を止める scrollIntoView({ behavior: "smooth" })：スムーススクロールを実行 古いブラウザに対応するには？ 古いブラウザ（IEなど）では scrollIntoView の behavior: "smooth" が効かないことがあります。その場合は polyfill や requestAnimationFrame を使った自作スクロール関数を使う方法もありますが、近年はモダンブラウザ中心なので基本は不要です。 おわりに スムーススクロールは、ユーザーにとって自然で心地よい体験を提供できます。jQueryを使わず、軽量な実装を目指すなら、今回の方法がおすすめです。 次回は「ページ上部に戻るボタンのスムーススクロール実装」など、応用テクニックも紹介します！