jQuery animate 画面をスクロールさせて移動

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

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

animateメソッド

.animate( properties [, duration ] [, easing ] [, complete ] )

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>

    $("#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>

    $("#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行目で取得した位置までアニメーションを伴って移動します。