指定した要素の位置にスクロールするコードと実行結果

jQueryを利用して、指定した要素の位置にスクロールするコードと実行結果を紹介します。

補足

jQueryを利用しない実装方法はこちらの記事を参照してください。

概要

jQueryを利用して画面をスクロールするには、$(window).scrollTop を利用します。

書式

$(window).scrollTop(スクロール位置);

プログラム例

コード

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="Scripts/jquery-3.4.1.js"></script>
    <title></title>
  <style>
    <!--
    .section{
      height:320px;
      border:1px solid #0094ff;
    }
    -->
  </style>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#link_section2').on('click', function () {
        $(window).scrollTop($('#section2').position().top);
      });
      $('#link_section3').on('click', function () {
        $(window).scrollTop($('#section3').position().top);
      });
      $('#link_section4').on('click', function () {
        $(window).scrollTop($('#section4').position().top);
      });
      $('#link_section5').on('click', function () {
        $(window).scrollTop($('#section5').position().top);
      });
      $('#link_section6').on('click', function () {
        $(window).scrollTop($('#section6').position().top);
      });
      $('#link_section7').on('click', function () {
        $(window).scrollTop($('#section7').position().top);
      });
      $('#link_section8').on('click', function () {
        $(window).scrollTop($('#section8').position().top);
      });
    });
  </script>
</head>
<body>
  <div id="section1" class="section">
    Section1<br />
    <a id="link_section2" href="javascript:void(0);">Section2</a><br />
    <a id="link_section3" href="javascript:void(0);">Section3</a><br />
    <a id="link_section4" href="javascript:void(0);">Section4</a><br />
    <a id="link_section5" href="javascript:void(0);">Section5</a><br />
    <a id="link_section6" href="javascript:void(0);">Section6</a><br />
    <a id="link_section7" href="javascript:void(0);">Section7</a><br />
    <a id="link_section8" href="javascript:void(0);">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>

解説

それぞれのリンクのクリックにより下記のコードが実行されます。(下記のコードは section2 のリンクの場合)
$(window).scrollTop($('#section2').position().top); のコードでスクロールが実行されます。
スクロール先の位置は $　('#section2').position().top の値を指定しています。#section2 のIDを持つ要素の上部の座標がスクロール位置として指定されます。座標の取得に関してはこちらの記事を参照してください。

  $('#link_section2').on('click', function () {
    $(window).scrollTop($('#section2').position().top);
  });

実行結果

上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。

[Section4]のリンクをクリックすると、Section4の位置までスクロールします。

同様に[Section6]のリンクをクリックすると、Section6の位置までスクロールします。

[Section8]のリンクでも同様の動作になります。

指定した要素の位置にスクロールできました。

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

作成日: 2019-07-08

目次

指定した要素の位置にスクロールするコードと実行結果

概要

書式

プログラム例

コード

解説

実行結果

関連するページ