Skip to main content

Visit Mozilla.org

DOM:element.scrollIntoView

出典: MDC

« Gecko DOM リファレンス

目次

[編集] 概要

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

[編集] 構文

element.scrollIntoView(alignWithTop);
  • alignWithTop はオプションです。これを true にすると要素が上端に来るようにスクロールします。false に設定した場合は下端に来るようにスクロールします。
  • もし、alignWithTop パラメタを省略したら、要素が上端に来るようにスクロールします。

[編集] 例

<html>
 <head>
  <title>ScrollIntoView() example</title>

  <script type="text/javascript">
    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">The para to show</p>
    <div style="height: 100px"></div>
  </div>
  <input type="button" value="Show para" 
   onclick="showIt('pToShow');">

 </body>
</html>

[編集] 注記

他の要素とのレイアウトの関係で、指定した要素が完全に上端・下端まで移動しない場合があります。

[編集] 仕様

仕様には含まれません。

"http://developer.mozilla.org/ja/docs/DOM:element.scrollIntoView" より作成