element.scrollIntoView

概要

scrollIntoView() メソッドは、要素が(ブラウザのウィンドウ上の)表示範囲に入るまでページをスクロールします。

構文

element.scrollIntoView(alignWithTop);
alignWithTop Optional
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) ? ? ?

注記

他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。

仕様書

ドキュメントのタグと貢献者

Contributors to this page: fscholz, khalid32, ethertank, Potappo, Snaka
最終更新者: khalid32,