Categories: JavaScript

【JavaScript入門】a要素クリック時に指定した要素までスムーススクロールする方法

jQueryを使わずにJavaScriptだけでスムーススクロールするサンプルです。

サンプル

以下のサンプルでは、例えば、「コンテンツ3へ移動」リンクを押下するとページ内の「コンテンツ3」までスムーススクロールします。他のリンクもそれぞれも要素へスムーススクロールします。

See the Pen
スクロール2
by shiakisudev (@shiakisu)
on CodePen.

HTML

<a href="#content1">コンテンツ1へ移動</a>
<a href="#content2">コンテンツ2へ移動</a>
<a href="#content3">コンテンツ3へ移動</a>
<a href="#content4">コンテンツ4へ移動</a>
<a href="#content5">コンテンツ5へ移動</a>
<a href="#content6">コンテンツ6へ移動</a>
<h2 id="content1" class="main">コンテンツ1</h2>
<h2 id="content2" class="main">コンテンツ2</h2>
<h2 id="content3" class="main">コンテンツ3</h2>
<h2 id="content4" class="main">コンテンツ4</h2>
<h2 id="content5" class="main">コンテンツ5</h2>
<h2 id="content6" class="main">コンテンツ6</h2>
<a href="#content1">コンテンツ1へ移動</a>
<a href="#content2">コンテンツ2へ移動</a>
<a href="#content3">コンテンツ3へ移動</a>
<a href="#content4">コンテンツ4へ移動</a>
<a href="#content5">コンテンツ5へ移動</a>
<a href="#content6">コンテンツ6へ移動</a>

CSS

.main {
    height: 300px;
}
#content1,#content4  {
    background-color:pink;
}
#content2,#content5 {
    background-color:aqua;
}
#content3,#content6 {
    background-color:lime;
}

js

window.addEventListener('load', (event) => {

    document.querySelectorAll('a[href^="#"]').forEach(e => e.addEventListener('click', function(e){

        //a要素のクリックイベントをキャンセル。
        e.preventDefault();

        //a要素が持つhref属性の値を取得。(#content1のように先頭に#が付いた状態で取得される。)
        let target = e.target.getAttribute("href");

        //指定した要素までの距離を取得。
        let targetTop = document.querySelector(target).getBoundingClientRect().top + window.pageYOffset;

        let scrollOptions = {
          left: 0,
          top: targetTop,
          behavior: 'smooth'
        }

        //指定した要素へスクロールする。
        window.scrollTo(scrollOptions);
    }));

});

解説

前提としてa要素と移動先の要素は以下のようにid値で紐づけておきます。

<a href="#content3">コンテンツ3へ移動</a>
<h2 id="content3" class="main">コンテンツ3</h2>

ここからJavaScriptの解説です。
3行目の以下の処理で、a要素のhref属性の値が#から始まるa要素をすべて取得します。

document.querySelectorAll('a[href^="#"]')

6行目の以下の処理で、ユーザがクリックしたa要素が持つ本来のページ移動処理をキャンセルします。

e.preventDefault();

9行目の以下の処理で、ユーザがクリックしたa要素のhref属性の値を取得します。
例えばユーザが「コンテンツ3へ移動」のa要素をクリックしていた場合は変数target#content3という値が格納されることになります。

let target = e.target.getAttribute("href");

12行目の以下の処理で、先ほどの変数targetを使ってquerySelectorで対象の要素を取得します。
変数targetの値は#content3なのでこれがそのままidになるわけです。#content3をidとして持つ要素を取得することができます。
getBoundingClientRect().top + window.pageYOffsetはその要素の絶対位置を取得するコードです。

let targetTop = document.querySelector(target).getBoundingClientRect().top + window.pageYOffset;

14~18行目でスクロールの設定を行います。
横方向へのスクロールはしないため、left: 0にします。
縦方向は指定した要素までスクロールしたいのでtop: targetTopにします。
スムーススクロールしたい場合はbehavior: 'smooth'にします。

let scrollOptions = {
  left: 0,
  top: targetTop,
  behavior: 'smooth'
}

21行目の以下の処理が走ったタイミングでスムーススクロールが行われます。

window.scrollTo(scrollOptions);

参考リンク

querySelectorquerySelectorAllについては以下の記事で解説しています。


scrollToなど基本的なスクロール系メソッドについては以下の記事で解説しています。

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp