【JavaScript】scrollIntoViewで指定した要素の位置までスクロールする

こんにちは、Ryohei（@ityryohei）です！

scrollIntoViewは、指定した要素がブラウザのウィンドウ上に表示される位置までスクロールするElementのメソッドになります。

用途は様々で、読み込み時に指定の要素位置までスクロールしたり、ボタンクリックで指定した要素の位置までスクロールしたり、一般的なページ内リンクのように使用することもできます。また、スクロール時に要素のどこまで移動するかもテキストで指定することができます。

対応ブラウザはまだ少ないですが、今後使用することができるようになれば、複雑な計算をせずに要素の位置までスクロールすることができるため、私としては発展を期待しているメソッドになります。

では、解説していきます。

scrollIntoViewとは

scrollIntoViewは冒頭で説明した通り、指定した要素の位置までスクロールするElementのメソッドになります。

使い方は簡単で、要素に対してメソッドを指定するだけで動作します。

let element = document.getElementById('elem');
element.scrollIntoView();

またブール値を指定することで、要素を上端までスクロールするか、下端までスクロールするかを指定することができます。
（レイアウトによっては上端・下端までスクロールされない場合があります。）

let element = document.getElementById('elem');

//ウィンドウの上端までスクロール
element.scrollIntoView(true);

//ウィンドウの下端までスクロール
element.scrollIntoView(true);

また、一部のブラウザでは下記のように詳細なオプションを指定することができます。

let element = document.getElementById('elem');

element.scrollIntoView({
  behavior: "値",
  block: "値",
  inline: "値"
});

オプションに指定するプロパティの値についてご説明します。

scrollIntoViewのオプション

scrollIntoViewのオプションは下記で構成されています。

behavior(スクロール動作)
block(縦方向のスクロール位置)
inline(横方向のスクロール位置)

behavior

behaviorプロパティは、スクロール時の動作を指定することができます。スクロール時間や動きの指定は現在はできないようです。

auto	初期値です。ブラウザの動作に任せる形となるため、基本的にアニメーションしません。
instant	アニメーションせずに指定した要素の位置までスクロールします。
smooth	スムーズなアニメーションで要素の位置までスクロールします。

block

blockプロパティは、縦方向のスクロール位置を指定します。

start	指定した要素がウィンドウの上端に表示されるようにスクロールします。
center	指定した要素がウィンドウの縦方向に対して中央に表示されるようにスクロールします。
end	指定した要素がウィンドウの下端に表示されるようにスクロールします。
nearest	初期値です。現在の表示位置から計算して上端か下端の近い方にスクロールします。

inline

inlineプロパティは横方向のスクロール位置を指定します。

start	指定した要素がウィンドウの左端に表示されるようにスクロールします。
center	指定した要素がウィンドウの横方向に対して中央に表示されるようにスクロールします。
end	指定した要素がウィンドウの右端に表示されるようにスクロールします。
nearest	初期値です。現在の表示位置から計算して左端か右端の近い方にスクロールします。

上記のオプションを設定することで、スクロール位置を細かく調整できるようになります。

scrollIntoViewでページ内リンクをスムーズスクロールにする

最後にサンプル、というほど良い出来はないですが、scrollIntoViewのメソッドを使用してページ内リンクをスムーズスクロールにする処理を作ってみます。

HTML

<header id="header">
  <h1>Header</h1>
</header>
<main id="main">
  <h1>Main Contents</h1>
  <a href="#footer">to Footer</a>

  <!-- コンテンツ -->  

  <a href="#header">to Header</a>
  <a href="https://www.google.co.jp/">to Google</a>
</main>

<footer id="footer">
  <h1>Footer</h1>
</footer>

JS

const SmoothScroll = ()=>{

  let anchors = document.querySelectorAll('a');

  anchors.forEach(anchor => {  
    anchor.addEventListener('click', (e)=>{

      if(/#/.test(e.target.getAttribute('href'))){
        e.preventDefault();

        let target = e.target.getAttribute('href').replace('#', '');
        let targetElement = document.getElementById(target);

        targetElement.scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "start"
        });
      }
    });
  });
}
SmoothScroll();