Written by Kasumi

【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で実装する方法が知りたい。

目次

関連記事

JavaScript

【JavaScript】setTimeoutが効かない。よくあるパターンの対処方法

2022.12.05
272
JavaScript

【JavaScript】Local Storageに複数のデータをJSON形式で保存。配列で取得する方法

2022.11.20
206
JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
338
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
490