概要
scrollIntoView() メソッドは、要素が(ブラウザのウィンドウ上の)表示範囲に入るまでページをスクロールします。
構文
element.scrollIntoView(alignWithTop);
-
alignWithTopOptional -
trueを指定した場合、要素が上端に来るようにスクロールする(※指定を省略した場合のデフォルトの動作)
falseを指定した場合、下端に来るようにスクロールする。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ScrollIntoView() メソッドの実例</title>
<script>
function showIt(elID) {
var el = document.getElementById(elID);
el.scrollIntoView(true);
}
</script>
</head>
<body>
<div style="height: 5em; width: 30em; overflow: scroll; border: 1px solid blue;">
<div style="height: 100px"></div>
<p id="pToShow">パラグラフ</p>
<div style="height: 100px"></div>
</div>
<input type="button" value="パラグラフまでスクロール" onclick="showIt('pToShow');">
</body>
</html>
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | 6 | 10.0 (以前から可能か) | 4 (以前から可能か) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | 1.0 (1.0) | ? | ? | ? |
注記
他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。