ページ内リンクのスクロールを簡単に実装できるscrollIntoView

同じページ内を移動するリンクスクロールは、今やcssのscroll-behaviorプロパティだけでも実装できますが、どうしてもJava Scriptを使いたい場合もあると思います。

かつてはターゲット要素の位置を取得して〜とかごちゃごちゃ書いていたのですが、それをシンプルなコードで書けるようになったのがscrollIntoViewメソッドです。

ちなみに現時点でIEは未対応です。safari、iOS safariはoption指定ができません（スムーススクロールができない）。

scrollIntoViewの使い方

scrollIntoView は、対象となる要素（リンクターゲット）が見える位置までページをスクロールします。オプションで、要素のどこに、どのように移動するかを指定します。

target.scrollIntoView(option); //optionは省略可

option	内容 : 設定できる値
behavior	動き方：auto , smooth
block	垂直方向の停止位置：start , center, end, nearest
inline	水平方向の停止位置：start , center, end, nearest

scrollIntoViewで指定できるオプション

初期値は、

target.scrollIntoView({
    behavior: "auto" ,
    block: "start" ,
    inline: "nearest"
});

となります。

ページ内リンクをまとめて扱うのなら、大体下のような感じのコードでしょうか。

const linkList = document.querySelectorAll( 'a[href^="#"]');
for( const link of linkList){
  link.addEventListener("click", (e)=> {
    e.preventDefault();
    const target = document.querySelector(link.hash);
    target.scrollIntoView({ OPTION });
  },{});
};