JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.scrollIntoView()

JavaScriptの.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 タグに反応するので、使い勝手の良いスニペットです。