.scrollIntoView()

JavaScriptの.scrollIntoView()のクリックでスムーススクロール

スムーススクロール

JavaScriptの.scrollIntoView() メソッドを使って、コード量少なめでできるスムーススクロールを作ってみました。

.scrollIntoView()

scrollIntoView() は、呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールするメソッドです。

この記事のスニペットは、このメソッドのスムーズにスクロールする behavior を使って、スムーススクロールを作っています。

かかかず
かかかず

簡単に使えるメソッドで、この記事ではsmooth を指定しています。

スムーススクロールのサンプル

a タグにつけた href の「#」に反応してスムーススクロールです。

「001」〜「003」の各ボタンをクリックすると、その下にあるそれぞれのブロックにスムーススクロールします。

001のブロック
002のブロック
003のブロック
かかかず
かかかず

サンプル上部の「001〜003」のボタンはCSSのsticky で追従させてます。

スムーススクロールのコード

HTMLは、ul タグの中身にある a タグ がスクロールのトリガーになります。その為、a タグには、href でスクロールさせたい「#」をつけた要素のid名を指定して、サンプルではdiv タグにそれぞれ対応したid名を付与しています。

<ul>
<li><a href="#block001">001</a></li>
<li><a href="#block002">002</a></li>
<li><a href="#block003">003</a></li>
</ul>
<div id="block001">001のブロック</div>
<div id="block002">002のブロック</div>
<div id="block003">003のブロック</div>

次にJavaScriptですが、.querySelectorAll() を使い a タグに#が付いているものを対象にします。

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

そして、.addEventListener のクリックで発動し、.scrollIntoView() でスクロールの動きを定義して完成です。

かかかず
かかかず

a タグに反応するので、使い勝手の良いスニペットです。