Webページ内で特定のセクションにスムーズにスクロールさせたい場合、JavaScriptを使うことで簡単に実装できます。本記事では、jQueryを使わずに、純粋なJavaScriptでスムーススクロールを実装する方法を紹介します。
scrollIntoView を使った簡単なスムーススクロール
scrollIntoView メソッドを使えば、簡単にスムーススクロールを実装できます。
document.addEventListener("DOMContentLoaded", function () {
const links = document.querySelectorAll('a[href^="#"]'); // #で始まるリンクを取得
links.forEach(link => {
link.addEventListener("click", function (e) {
e.preventDefault(); // デフォルトの動作を無効化
const targetId = this.getAttribute("href").substring(1); // IDを取得
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
});document.querySelectorAll(‘a[href^=”#”]’) でページ内リンクを取得し、scrollIntoView({ behavior: “smooth” }) を使ってスムーススクロールを実現しています。
この方法は簡単に実装でき、JavaScriptの標準機能で動作するため軽量ですが、ナビゲーションバーが固定されている場合にスクロール位置がずれることがあります。
window.scrollTo を使ったスムーススクロール（オフセット調整可能）
固定ナビゲーションバーがある場合など、スクロール位置を調整したい場合は window.scrollTo を使用すると便利です。
document.addEventListener("DOMContentLoaded", function () {
const links = document.querySelectorAll('a[href^="#"]');
links.forEach(link => {
link.addEventListener("click", function (e) {
e.preventDefault();
const targetId = this.getAttribute("href").substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
const offsetTop = targetElement.getBoundingClientRect().top + window.scrollY - 50;
window.scrollTo({
top: offsetTop,
behavior: "smooth"
});
}
});
});
});getBoundingClientRect().top + window.scrollY で正確なスクロール位置を取得し、- 50 でスクロール位置を調整することで、固定ナビゲーションバーがある場合にも対応できます。
この方法はスクロール位置を細かく調整でき、scrollIntoView より柔軟な制御が可能ですが、コードが少し長くなります。
まとめ
JavaScriptを使えば、jQueryなしでも簡単にスムーススクロールを実装できます。scrollIntoView を使えばシンプルに実装できますが、固定ナビゲーションがある場合は window.scrollTo を使うことで、より調整しやすくなります。
用途に応じて最適な方法を選び、快適なユーザー体験を提供しましょう！
