指定要素までスクロール

指定要素までスクロールするには、element.scrollIntoViewメソッドを使用します。

  • ※ IE7以下には対応しません。

構文

JavaScript

element.scrollIntoView([alignToTop|options])
  • ※ 引数を指定する場合は、alignToTop引数またはoptions引数のどちらかを指定します。
  • ※ IE8以上は引数の指定ができません。
    （指定しても無視されます）
引数名 型 説明
第一引数 alignToTop boolean 対象要素への停止位置
true（初期値）を指定すると、
対象要素の上辺をウィンドウ表示領域の上辺に停止、
falseを指定すると、
対象要素の下辺をウィンドウ表示領域の下辺に停止する
options Object スクロールするオプションを
{behavior: ..., block: ..., inline: ...} 形式で指定する
詳細は options引数の詳細 を参照

options引数の詳細

キー 説明 指定可能な値
behavior スクロールする際の
アニメーション動作方法
auto ブラウザの動作に任せる
instant アニメーションしない
smooth アニメーションする
（スムーズにスクロール）
block 縦方向の
スクロール停止位置
start 対象要素の上辺をウィンドウ表示領域の上辺へ停止
center 対象要素の中央をウィンドウ表示領域の中央へ停止
end 対象要素の下辺をウィンドウ表示領域の下辺へ停止
nearest 現在の位置から最も近い辺へ停止
inline 横方向の
スクロール位置
start 対象要素の左辺をウィンドウ表示領域の左辺へ停止
center 対象要素の中央をウィンドウ表示領域の中央へ停止
end 対象要素の右辺をウィンドウ表示領域の右辺へ停止
nearest 現在の位置から最も近い辺へ停止

サンプルコード

JavaScript

var gotoElem = document.getElementById('goto');

gotoElem.addEventListener('click', function() {
	var targetId   = this.getAttribute('href').replace(/^#/, ''),
	    targetElem = document.getElementById(targetId);

	targetElem.scrollIntoView();
});

options引数を指定した場合は次のようなコードになります。

JavaScript

var gotoElem = document.getElementById('goto');

gotoElem.addEventListener('click', function() {
	var targetId   = this.getAttribute('href').replace(/^#/, ''),
	    targetElem = document.getElementById(targetId);

	targetElem.scrollIntoView({
		behavior : 'smooth',
		block    : 'end',
		inline   : 'center'
	});
});

JavaScript逆引きリファレンス一覧へ戻る