【jQuery不要】スムーススクロールをJavaScriptで実装する方法
jQueryを使わず、スムーススクロールをJavaScriptで実装する方法が知りたい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
aタグをクリックすると、href属性に設定したアンカー箇所へスムーススクロールされます。
また、固定ヘッダー分の高さも除外される作りになってます。
実装手順は以下の通りです。
スムーススクロールを実装するJavaScriptコード
const offset = 50; // ヘッダーの高さを入れる
const links = document.querySelectorAll('a[href^="#"]');//すべてのaタグ href属性に#が入ってるもの
// DOM内のa[href^="#"]の数だけループ
links.forEach((link) => {
// a[href^="#"]をクリックしたら
link.addEventListener('click', (event) => {
event.preventDefault();
//href属性の中身を取得
let href = link.getAttribute('href').substr(1);
href = href == '#' ? 'html' : `[id="${href}"]`;
//href属性のIDを変数に格納
const target = document.querySelector(href);
//上記IDの位置を取得
const rect = target.getBoundingClientRect();
//ページtopからのスクロール量を取得
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
//固定ヘッダーの高さを引く
const position = rect.top + scrollTop - offset;
//スムーススクロール
window.scrollTo({
top: position,
behavior: 'smooth'
});
});
});
スムーススクロールを実装するJavaScriptコード例です。
まず、固定ヘッダーの高さ・DOM内のaタグでhref属性にアンカーが入ってるものすべてを変数に格納。
aタグの数だけforEachでループ。
addEventListenerでaタグのクリックイベントを宣言。
クリックしたaタグのhref属性に入ってるIDを取得。
getBoundingClientRectメソッドで上記IDが設置されてるアンカーの位置を取得。
window.pageYOffset || document.documentElement.scrollTopで現在のスクロール量を取得。
上記取得した位置から固定ヘッダー分の高さを引きます。
最後にscrollTo()メソッドでアンカー位置までスクロールさせます。
オプションでbehavior: ‘smooth’を引数に指定する事でスムース機能が付きます。
以上で実装完了です。
まとめ
jQueryを使わず、スムーススクロールをJavaScriptで実装する方法が知りたい。
目次