目標

よくWebページで見るトップへ戻るボタン（画像右下）を作成します。

開発環境

Rails 6.1.4
ruby 2.6.3

目次

Viewページの作成
CSSファイルの作成
jQueryの定義（jsファイルの作成）

Viewページの作成

まずトップへ戻るボタンとして使用したい画像を用意します。
今回は下記の画像使用。

下記のように記述します。

index.html

<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8"　/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>   

    <span id="back">
      <a href="#">
        <img src="img/arrow.png" alt="">
      </a>
    </span>

    <script src="js/jquery.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

bodyの終了タグの直前で、jquery.min.jsファイルとscript.jsファイルを読み込みます。

CSSファイルの作成

次に、CSSファイルを作成します。

style.css

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#back {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

#back img {
  width: 50px;
}

ファイル保存後、ブラウザで確認をしてみます。
このまま「トップへ戻る」ボタンをクリックすると、

一瞬でページ最上部へ移動してしまいます。

トップまでスーッとスクロールしてほしいですよね？
ここでjQueryの出番です。

jQueryの定義（jsファイルの作成）

script.jsファイルに、下記のように記述します。
今回は各ファイルをjsフォルダに格納してます。

js/script.js

$(function() {
  $('#back a').on('click',function(event){
    $('body, html').animate({
      scrollTop:0
    }, 800);
    event.preventDefault();
  });
});

これで再度ブラウザで確認をすると、上までスーッと移動します！
上記のアニメーション効果を設定部分（下記）のアニメーション動作時間は

ミリ秒で指定する以外にも「slow」,「normal」,「fast」で指定することも可能です。

 $('セレクタ名').animate({
  変化対象のプロパティ名:変化値
}, アニメーションの動作時間);

お疲れ様でした！
あくまで備忘録なので足りない説明等多々あるかと思います。
行き詰まった際の助けになれば幸いです。