jQuery scrollTop 画面を上にスクロールさせる

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

サンプル	scrollTopメソッドとanimateメソッド
	画面トップまで移動する(scrollTop)
	画面の「トップ」までスクロール+スピードを指定(animate+scrollTop)
	画面の「指定の位置」までスクロールする(animate+scrollTop)

scrollTopメソッドとanimateメソッド

.scrollTop( value )

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

jQueryのメソッドです。
scrollTopの引数に数値をいれるとその位置まで移動します。
画面だけでなくテキストエリアで縦スクロールバーが表示された時等でも使用できます。
animateは、移動にスピードや動きを追加できます。
以下はjQueryサイトのanimateメソッドのページです。
http://api.jquery.com/animate/

画面トップまで移動する(scrollTop)

ボタンを押すと画面トップまで移動します。早すぎると感じるかもしれません。

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

<!DOCTYPE html>
<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.6.0/jquery.min.js"></script>
    <script>
      $("#button1").click(function () {
        $("html,body").scrollTop(0);
      });
    </script>
  </body>
</html>

テストポイント

画面の「トップ」までスクロール+スピードを指定(animate+scrollTop)

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

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

<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行目で設定した位置までアニメーションを伴って移動します。

画面の「指定の位置」までスクロールする(animate+scrollTop)

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

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

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