プログラミング

【PR】を含みます。

【JavaScript】指定した要素までスクロールする方法2選

JavaScript 指定した要素までスクロールする方法2選

指定した要素までスクロールする方法を2つ紹介します。

ひとつめはscrollIntoView()を使用する方法、ふたつめはwindow.scrollTo()を使用する方法を紹介します。

どちらもスムーススクロールに対応しています。

scrollIntoViewメソッドで指定した要素までスクロール

実装コード

以下のコードはID属性がtargetである要素に対して、表示領域の左上にくるようにスムーススクロールします。

JavaSctipt
Copy
  1. // 対象の要素を取得
  2. const element = document.getElementById('target');
  4. // 要素の位置までスクロール
  5. element.scrollIntoView({
  6.   behavior: 'smooth',
  7.   block: 'start',
  8.   inline: 'start'
  9. });

scrollIntoViewメソッドのオプション一覧

behavior
スクロールのアニメーションの動作を指定
behavior: "auto"(デフォルト)
即座にスクロールします。
behavior: "smooth"
なめらかにアニメーションしながらスクロールします。
block
垂直方向のスクロール位置を指定
block: "start"(デフォルト)
要素の上端がビューポートの上端に揃うようにスクロールします。
block: "center"
要素の中心がビューポートの中心に揃うようにスクロールします。
block: "end"
要素の下端がビューポートの下端に揃うようにスクロールします。
block: "nearest"
現在のスクロール位置を考慮して、要素が既に画面内にある場合はスクロールしません。要素が画面外にある場合は、要素の一部が画面内に表示されるようにスクロールします。
inline
水平方向のスクロール位置を指定
inline: "start"
要素の左端がビューポートの左端に揃うようにスクロールします。
inline: "center"
要素の中心がビューポートの中心に揃うようにスクロールします。
inline: "end"
要素の右端がビューポートの右端に揃うようにスクロールします。
inline: "nearest"(デフォルト)
現在のスクロール位置を考慮して、要素が既に画面内にある場合はスクロールしません。要素が画面外にある場合は、要素の一部が画面内に表示されるようにスクロールします。

scrollIntoViewメソッドのブラウザ別対応状況

Data on support for the scrollintoview feature across the major browsers from caniuse.com

window.scrollToメソッドで指定した要素までスクロール

実装コード

以下のコードはtargetというIDを持つ要素の位置までなめらかにスクロールします。

JavaSctipt
Copy
  1. // 対象の要素を取得
  2. const element = document.getElementById('target');
  4. // 要素の位置を取得
  5. const rect = element.getBoundingClientRect();
  6. const elementTop = rect.top + window.pageYOffset;
  8. // 要素の位置までスクロール
  9. window.scrollTo({
  10.   top: elementTop,
  11.   left: 0,
  12.   behavior: 'smooth'
  13. });

window.scrollToメソッドのオプション一覧

top
ページの上端からのスクロール位置をピクセル単位で指定
left
ページの左端からのスクロール位置をピクセル単位で指定
behavior
スクロールのアニメーションの動作を指定
behavior: "auto"(デフォルト)
即座にスクロールします。
behavior: "smooth"
なめらかにアニメーションしながらスクロールします。

scrollIntoViewメソッドとwindow.scrollToメソッドの違い

対象

scrollIntoViewは要素を対象にしたメソッドであり、window.scrollToはウィンドウ全体の位置を制御します。

スクロール位置の指定

scrollIntoViewは要素がビューポートに表示されるように自動的に位置を調整するのに対し、window.scrollToは指定した座標に直接スクロールします。

scrollIntoViewは位置を細かく制御できますが、オプションの値によってスクロールが発生しない場合があります（nearestを指定し、要素がすでにビューポート内に完全に収まっている場合等）。

用途

画面内で特定の要素にフォーカスを当てたいときにはscrollIntoView、ページ全体を指定の位置までスクロールさせたいときにはwindow.scrollToが適しています。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-