Element: scrollIntoView() メソッド

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.

* Some parts of this feature may have varying levels of support.

Element インターフェイスのscrollIntoView() メソッドは、scrollIntoView() が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします。

構文

scrollIntoView()scrollIntoView(alignToTop)scrollIntoView(scrollIntoViewOptions)

引数

alignToTop省略可

論理値です。

true の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。scrollIntoViewOptions: {block: "start", inline: "nearest"} に相当します。これが既定値です。
false の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。scrollIntoViewOptions: {block: "end", inline: "nearest"} に相当します。

scrollIntoViewOptions省略可 Experimental

以下のプロパティを持つオブジェクトです。

behavior省略可

スクロールを即座に行うか、滑らかにアニメーションさせるかを決定します。このオプションは文字列であり、以下のいずれかの値を取ります。

smooth: スクロールをスムーズなアニメーションで行う
instant: スクロールを単一のジャンプで即座に行う
auto: スクロールの動作をscroll-behavior の計算値によって指定する

block省略可

スクロール可能な祖先コンテナー内での、要素の垂直配置を定義します。このオプションは文字列であり、以下の値のいずれかを受け入れます。

start: 要素の上端をスクロール可能なコンテナーの上端に揃え、要素を可視領域の垂直方向の先頭に配置します。
center: 要素をスクロール可能なコンテナーの垂直方向の中央に配置し、可視領域の中央に位置指定します。
end: 要素の下端をスクロール可能なコンテナーの下端に揃え、要素を可視領域の垂直方向の末尾に配置します。
nearest: 要素を垂直方向の最も近い端までスクロールします。要素がスクロール可能なコンテナー内で上端により近い場合、上に配置されます。下端により近い場合、下端に配置されます。これにより、スクロールの距離が最小限に抑えられます。
既定値はstart です。

inline省略可

スクロール可能な親コンテナー内で要素の水平配置を定義します。このオプションは文字列であり、以下の値のいずれかを受け入れます。

start: 要素の左端をスクロール可能なコンテナーの左端に揃え、要素を可視領域の水平方向の先頭に配置します。
center: 要素をスクロール可能なコンテナーの水平方向の中央に配置し、可視領域の中央に位置指定します。
end: 要素の右端をスクロール可能なコンテナーの右端に揃え、要素を可視領域の水平方向の末尾に配置します。
nearest: 要素を水平方向の最も近い端までスクロールします。要素がスクロール可能なコンテナー内で左端により近い場合、左に配置されます。下端により近い場合、下端に配置されます。これにより、スクロールの距離が最小限に抑えられます。
既定値はnearest です。

返値

なし (undefined)。

例

scrollIntoView() の使用

const element = document.getElementById("box");element.scrollIntoView();element.scrollIntoView(false);element.scrollIntoView({ block: "end" });element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

top/bottom の配置の制御

既定では、要素はスクロール可能な親要素の上端（または下端）に配置されます。独自の配置間隔を定義するには、scroll-margin-top またはscroll-margin-bottom を使用します。これは、ページに固定されたヘッダーがある場合に役立つことがよくあります。

HTML

html

<body>  <header>ナビバー</header>  <main>    <button>下端へ移動</button>    <button>上端へ移動</button>  </main></body>

CSS

css

.navbar {  height: 50px;  position: sticky;  top: 0;  border-bottom: 1.5px solid black;  display: flex;  justify-content: center;  align-items: center;}.content {  height: 2000px;  position: relative;}#go-to-bottom {  position: absolute;  top: 10px;  /* これがないと、スクロールした際に、ボタンがナビゲーションバーの  下端ではなくページの上端に配置されてしまいます。 */  scroll-margin-top: 60px;}#go-to-top {  position: absolute;  bottom: 10px;  scroll-margin-bottom: 0;}

JavaScript

const goToTop = document.getElementById("go-to-top");const goToBottom = document.getElementById("go-to-bottom");goToBottom.addEventListener("click", () => {  goToTop.scrollIntoView({ behavior: "instant", block: "end" });});goToTop.addEventListener("click", () => {  goToBottom.scrollIntoView({ behavior: "instant", block: "start" });});