こんにちは、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();

DEMO

See the Pen scrollIntoView | JavaScript by ryohei (@intotheprogram) on CodePen.

さいごに

現在は対応ブラウザが少ない関係であまり知られていないメソッドになりますが、今後対応ブラウザが増えてくれば、余計な計算を省くことができるため、スクロール周りの処理は簡素化されていくように思います。対応ブラウザが増えるのを心待ちにしつつ、日々勉強をしていきましょう。

以上、JavaScriptのscrollIntoViewで指定した要素の位置までスクロールする方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。