JavaScriptの.scrollIntoView() メソッドを使って、コード量少なめでできるスムーススクロールを作ってみました。
.scrollIntoView()
scrollIntoView() は、呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールするメソッドです。
この記事のスニペットは、このメソッドのスムーズにスクロールする behavior を使って、スムーススクロールを作っています。
かかかず
簡単に使えるメソッドで、この記事ではsmooth を指定しています。
スムーススクロールのサンプル
a タグにつけた href の「#」に反応してスムーススクロールです。
「001」〜「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 タグに反応するので、使い勝手の良いスニペットです。
