指定した位置にスクロールする

最終更新日：2023-06-14
公開日：2020-05-18

指定した分だけページをスクロールさせる方法について解説します。

この記事のポイント

縦横自由に移動できる
HTML要素の表示位置はgetBoundingClientRectメソッドで取得する

スクロール量を取得

ページを指定した分だけスクロールさせるには、windowオブジェクトのscrollToメソッドを使います。
以下の例では「コンテンツ3へ移動」ボタンを押すとコンテンツ3を表示する位置まで移動します。

コードは次のようになります。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JS Test</title>
  <script>
    window.addEventListener('load', (event) => {

      document.getElementById('button1').addEventListener('click', () => {

        // content3の表示位置を取得
        let content3 = document.getElementById('content3');
        let content_position = content3.getBoundingClientRect();

        // content3へ移動
        window.scrollTo( 0, content_position.top);

      });
    });
  </script>
  <style>
    #content1,
    #content2,
    #content3 {
      height: 300px;
      background-color: #ccc;
    }
    #content2 {
      background-color:#ddd;
    }
  </style>
</head>
<body>
<h1>JS Test</h1>
<button id="button1">コンテンツ3へ移動</button>
<div id="content1">コンテンツ1</div>
<div id="content2">コンテンツ2</div>
<div id="content3">コンテンツ3</div>
</body>
</html>

scrollToメソッドは第1引数に横の移動位置、第2引数に縦の移動位置を指定します。
よくWebサイトで「ページトップへ戻る」を押すとページ上部に移動する機能が設置されていることがありますが、原理としては同じメソッドを使って実現しています。

上のコードではまずコンテンツ3の表示位置をgetBoundingClientRectメソッドで取得し、topプロパティの値をscrollToメソッドに渡すことで移動機能を実装しています。
動作自体はアンカーリンクによる移動と同じです。

getBoundingClientRectメソッドは該当するHTML要素の表示位置やサイズを取得できる便利なメソッドで、ページの最上部を起点とした表示位置をtopプロパティ、左端を起点する表示位置はleftプロパティ、ページ下部を起点する表示位置はbottomプロパティ、右端を起点とする表示位置はrightプロパティから取得できます。

記事一覧

スクロール量を取得

JavaScript コード例

関連記事