初めに

JavaScriptにまだまだ慣れていません

今回はまず簡単そうな...トップに戻るボタンを設置してみました。 ![スクリーンショット 2021-08-22 11.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/677a7313-9c61-df98-a059-98e3074e17f8.png)

既にJqueryは導入済です。

ボタンを決める

今回は以下のアイコン素材から、矢印を入手しました！

ボタンの設置

とりあえず全ページに置きたいので、
application.html.erbに記述します。

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>my port</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    </div>
    <!--ヘッダーの内容は部分テンプレート-->
     <%= render 'layouts/header' %>
    <span id ="back"><a href="#"><%= image_tag asset_path("top3.png"), class:"back-img"%></a></span>


    <%= yield %>
  </body>
</html>

<span id ="back"><a href="#"><%= image_tag asset_path("top3.png"), class:"back-img"%></a></span>
でボタンを設置しています。

はページの上部を表します。
ちなみに、id=backとしてますが、classよりidで指定した方が
処理が早いそうです！

今のままだと位置が決まってないので位置をCSSで指定します。

ボタンの位置を決める

app/assets/stylesheets/application.scss

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

.back-img {
  width: 50px;
  hover:none;
}

「position:fixed」は画面の決まった位置に固定する
ということです。今回右から,下から20pxのところに固定です。
.back-imgのところは、私は今回hover:none;にしましたが、
画像サイズだけの指定でOKです。

これでボタンを押せば上に戻ります

jQueryで動きを出す

application.js

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

(function() {で関数を定義します。
$('#back a').on('click',function(event){は、
以下のようになっています。
今回の場合だと、$('#id名要素名')にしてるので、
id内のaタグがクリックされたら、処理が起こるようになります。

$('.セレクタ名').on('click', function() {
  イベント発生時に行われる処理
});

イベントの記述方法については下記もありますので、click( )という
書き方もできますが、この場合クリックされた時点で
イベントが終わってしまいます。

$('.セレクタ名').イベント名(function(){
  イベント発生時に行われる処理
});

次にクリックされたら何をするか　ですが、以下の部分になります。

$('body, html').animate({
    scrollTop:0
  }, 800);
  event.preventDefault();
});

「animate(）」はJQueryの関数です。
以下のような使い方ができます。

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

なので今回はscrollTop:0＝最上部に、
8００ミリ秒（0.8秒間）かけて移動するということになります。
event.preventDefault(); は、aタグの機能を無効にしています。

リロードしないと動かない場合

turbolinksが邪魔をしていますので、以下のように無効化をします。

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

終わり