【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

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

こんにちは、ryohei(@ityryohei)です!

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

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

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

本記事の内容

  • scrollIntoViewとは
  • scrollIntoViewのプロパティ
  • scrollIntoViewでページ内リンクをスムーズスクロールにしてみる

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

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>

</main>

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

JS

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

Array.prototype.forEach.call(anchors, function(anchor){  
  anchor.addEventListener('click', function(e){

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

      let href = this.getAttribute('href').replace('#', '');
      var target = document.getElementById('header');

      if(document.getElementById(href)){
        var target = document.getElementById(href);
      }

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

DEMO

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

さいごに

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

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

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

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

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍