mozilla
Your Search Results

    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: khalid32, Potappo, ethertank, fscholz, Snaka
    最終更新者: khalid32,