jQueryを使わずにページ内スムーススクロールの実装

はじめに

ページ内でのスクロールをスムーススクロールで実装したい。
その際に、jQueryを使って実装するのも方法ですが、使わなくてもそんなに複雑な記述なしで簡単に実装することが可能です。
以下より、その方法について解説していきたいと思います。

最初にコードの確認

index.html

<nav id="pageAnker">
  <a href="#anker1"></a>
  <a href="#anker2"></a>
  <a href="#anker3"></a>
  <a href="#anker4"></a>
  <a href="#anker5"></a>
</nav>

index.js

const pageAnkers = document.querySelectorAll("#pageAnker a");
pageAnkers.forEach(pageAnker => {
  pageAnker.addEventListener("click", e => {
    e.preventDefault();
    const ankerId = e.target.hash;
    const ankerTarget = document.querySelector(ankerId);
    ankerTarget.scrollIntoView({ behavior: "smooth" });
  });
});

スムーススクロールの記述は、これだけです。
次項より、各記述部分を解説していきます。

最初にページ内のアンカーを取得

index.js

const pageAnkers = document.querySelectorAll("#pageAnker a");

• ここでは仮に、<nav>タグ内のアンカーをdocument.querySelectorAll("#pageAnker a")ですべて取得します。
  取得したアンカーはすべて、定義した定数pageAnkersに格納されます。

取得したアンカーにそれぞれクリックイベントを追加する

index.js

pageAnkers.forEach(pageAnker => {
  pageAnker.addEventListener("click", e => {

　　〜〜〜〜〜中略〜〜〜〜〜

  });
});

• 取得したアンカーpageAnkersにそれぞれアクセスして処理するためには、forEachを使います。
  個別にアクセスする際に、使う引数はpageAnkerになります。

• pageAnkerに対してaddEventListenerで、イベントの種類に"click"を指定し、引数にイベントハンドラのeを与えます。これにより、クリックしたアンカーに対して{}内の記述を実行することができます。

スムーススクロールのイベントの記述

index.js

〜〜〜〜〜中略〜〜〜〜〜
pageAnkers.forEach(pageAnker => {
  pageAnker.addEventListener("click", e => {
    e.preventDefault();
    const ankerId = e.target.hash;
    const ankerTarget = document.querySelector(ankerId);
    ankerTarget.scrollIntoView({ behavior: "smooth" });
  });
});

• 最初の処理に、e.preventDefault()を指定してアンカーをクリックした際のページ遷移を無効にします。

• e.target.hashでイベントハンドラ(クリックイベントが発生したアンカー)のhref属性の値を取得し、定数ankerIdに格納します。

• document.querySelectorで、ankerIdと一致するid属性を持つセレクターを取得し、定数ankerTargetに格納します。

• 最後にankerTarget.scrollIntoView({ behavior: "smooth" })¹で、取得したセレクターankerTargetまでスクロールを実行します。

  まとめ

  スムーススクロールの記述は、そんなに難しくなく仕組みさえ分かってしまえば非常に簡単なものです。
  ただ、今回の記述はIE11などのブラウザでは非対応のメソッドを使用しているため注意が必要です。
  IE11への対応版は、今後の更新で取り上げる予定なので今しばらくお待ちください。

---

1. scrollIntoViewメソッドは、オプションでbehavior: "smooth"を指定することでスクロールのアニメーションを指定しています。 ↩