【Javascript】クリックしてページスクロールさせるやつ：scrollIntoView()

scrollIntoView() というメソッドがあることを先日知りましたので備忘録しておきます。

メニューだったりボタンだったりをクリックすると、ページ内のコンテンツがある位置までスクロールするやつってよくありますが、それを実装したいときに使える便利なメソッドです。

こんな感じで使えます。

<script>

//クリックするボタン
const btn = document.getElementById("btn");

//スクロール先の目標コンテンツ（見せたいコンテンツ）
const target = document.getElementById("target");

//ボタンをクリックしたら目標コンテンツまでスクロールする
btn.addEventListener("click", () => {
    target.scrollIntoView({behavior: "smooth"});
}); 
</script>

目標コンテンツの上までスクロールさせるか、下までスクロールさせるかなどのオプションもあるみたいです。

リファレンス：
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

これを知るまでは目標のY座標を取得してうんぬん、、とめんどくさい感じのやり方で書いてました。
2023年3月現在、ブラウザ対応もほぼ網羅してるようなので、今後はこれ一択で使っていくと思います。
(ちなみに私は完全独学コーダーなので、記事を参考にされる際は自己責任にてお願いいたします)

なお、そんな独学コーダーとして、ここ数年のJavascriptコーディングのお供は下記の書籍です。

JavaScriptコードレシピ集スグに使えるテクニック278　最新ECMAScri [ 池田泰延 ]

created by Rinker

まるで料理レシピ本のように、webサイトコーディングやAPI連携など、JSを使う際の頻出事例（JSで実装したいこと）が目次化されていて、そこからコードの詳細を当たっていくような内容です。大体の”やりたいこと”は載っています。

ただし、2019年刊行ということもあってか、scrollIntoViewメソッドのことは載ってません。
もしこの本の最新版が出たら買い直したいくらいです。

以上、備忘録でした。