jQuery animateのサンプル(画面をスクロールさせて移動)

jQueryのanimateメソッドで、画面をスクロールさせて移動するサンプルです。

目次

説明 animateメソッド
サンプル 画面トップまでスクロールする
  画面の指定位置までスクロールする

animateメソッド

  • jQueryのanimateメソッドです。
  • アニメーションの動きを追加できます。
  • 以下はjQueryサイトのanimateメソッドのページです。
    http://api.jquery.com/animate/

テストポイント

画面トップまでスクロールする

ボタンを押すと画面トップまでスクロールします。

コード

上記サンプルのコードです。

<html><body>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<input type="button" id="button1" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function () {
    $("#button1").click(function () {
      
      var position = 0;
      var speed = 600;
      $("html,body").animate({scrollTop:position},speed);

    });
  });
</script>
</html>

12行目は、位置を0に設定しています。
13行目は、移動するスピードを設定しています。400がデフォルト値です。
移動スピードは、数を大きくすると遅くなり、小さくすると早くなります。
14行目は、12行目で設定した位置までアニメーションを伴って移動します。

画面の指定位置までスクロールする

ボタンを押すとこの画面の「テストポイント」という記述箇所までスクロールします。

コード

上記サンプルのコードです。

<html><body>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p id="testpoint1">テストポイント</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<input type="button" id="button2" value="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function () {
    $("#button2").click(function () {
      
      const position = $('#testpoint1').offset().top;
      const speed = 200;
      $("html,body").animate({scrollTop:position},speed);

    });
  });
</script>
</html>

上記サンプルのコードです。

12行目は、3行目の要素の位置を取得しています。
13行目は、移動するスピードを設定しています。400がデフォルト値です。
移動スピードは、数を大きくすると遅くなり、小さくすると早くなります。
14行目は、12行目で取得した位置までアニメーションを伴って移動します。

関連の記事

jQuery animateのサンプル(要素をアニメーションで動かす)

△上に戻る