指定した要素の位置へスクロールする - JavaScript

JavaScriptで指定した要素の位置にスクロールするコードを紹介します。

概要

JavaScriptで指定した位置にスクロールするには、 document.documentElement.scrollTop にスクロールしたい位置の座標を代入することで指定位置にスクロールできます。指定した要素の位置にスクロールする場合は、あらかじめ、要素の座標を取得して、その値を document.documentElement.scrollTop に代入します。

プログラム

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    <!--
    .section{
      height:320px;
      border:1px solid #ff6a00;
    }
    -->
    </style>
    <script type="text/javascript">
        function ScrollWindow(elem) {
            var element = document.getElementById(elem);
            var rect = element.getBoundingClientRect();
            var elemtop = rect.top + window.pageYOffset;
            document.documentElement.scrollTop = elemtop;
        }

    </script>
</head>
<body>
    <div id="section1" class="section">
        Section1<br />
        <a id="link_section2" href="javascript:void(0);" onclick="ScrollWindow('section2');">Section2</a><br />
        <a id="link_section3" href="javascript:void(0);" onclick="ScrollWindow('section3');">Section3</a><br />
        <a id="link_section4" href="javascript:void(0);" onclick="ScrollWindow('section4');">Section4</a><br />
        <a id="link_section5" href="javascript:void(0);" onclick="ScrollWindow('section5');">Section5</a><br />
        <a id="link_section6" href="javascript:void(0);" onclick="ScrollWindow('section6');">Section6</a><br />
        <a id="link_section7" href="javascript:void(0);" onclick="ScrollWindow('section7');">Section7</a><br />
        <a id="link_section8" href="javascript:void(0);" onclick="ScrollWindow('section8');">Section8</a><br />
    </div>
    <div id="section2" class="section">Section2</div>
    <div id="section3" class="section">Section3</div>
    <div id="section4" class="section">Section4</div>
    <div id="section5" class="section">Section5</div>
    <div id="section6" class="section">Section6</div>
    <div id="section7" class="section">Section7</div>
    <div id="section8" class="section">Section8</div>
</body>
</html>

解説

ページのリンクのクリックにより、ScrollWindow 関数が呼び出されます。ScrollWindow 関数の第一引数にスクロールにより表示したい位置の要素を指定します。

ScrollWindow関数は下記の処理となっています。最初の行で関数に与えられた第一引数の要素名を document.getElementById メソッドに与えて、引数に与えられたIDの要素を取得します。続いて、取得した要素の getBoundingClientRect() メソッドを呼び出し、要素の座標値を取得します。取得した座標値に、window.pageYOffset を加算してページ全体の縦位置を取得します。(座標値の取得の詳細はこちらの記事も参照してください。)
取得できた座標値を document.documentElement.scrollTop に代入することで、指定した位置に画面をスクロールできます。

  function ScrollWindow(elem) {
    var element = document.getElementById(elem);
    var rect = element.getBoundingClientRect();
    var elemtop = rect.top + window.pageYOffset;
    document.documentElement.scrollTop = elemtop;
  }