概要
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) | ? | ? | ? |
注記
他の要素のレイアウトによっては、要素の上部または下部まで完全にスクロールされない場合があります。