環境

ruby 2.6.3
Rails 5.2.3

事前準備

何でも良いのですが、ここではscaffoldを使って、blog機能を先に実装してます。

jquery / Bootsrap のインストール

bootstrapを入れた理由は、今回の場合は特にない。

$ yarn add jquery

$ yarn add bootstrap

ruby：app/assets/javascripts/application.js(マニフェストファイルの修正)

//= require rails-ujs
//= require jquery
//= require jquery/dist/jquery.js
//= require bootstrap/dist/js/bootstrap.min
//= require activestorage
//= require turbolinks
//= require_tree .

ruby：app/assets/stylesheets/application.css(マニフェストファイルの修正)

*= require bootstrap/dist/css/bootstrap.min
*= require_tree .
*= require_self

補足：font-awesome-railsを導入

このリンク先にあるタグ<head>タグに入れる
https://fontawesome.com/start

gemを使ったやり方を試したが、動作しないため、簡単なこちらを選択した。

コード

app/views/layouts/application.html.erb

<body>
    <%= yield %>
    <div id="back-to-top" style="position:fixed;right:25px;bottom:5px">
      <a href="#"><i class="fas fa-arrow-alt-circle-up fa-5x"></i></a></div>
  </body>

top.css(ファイル名はなんでも良い)

.fa-arrow-circle-up:hover{
  color:blue;
  background-color:none;
}

#back-to-top a:hover{
  background :none;
  color:black;
}

scroll.js(ファイル名は何でも良い)

$(function(){
  // #back-to-topを消す
  $("#back-to-top").hide();

  // スクロールが十分された時に#back-to-topを表示。スクロールされたら非表示
  $(window).scroll(function(){
    // this(window要素)がどれだけスクロールしたかをscrollTop()を使って値を取る
    $('#pos').text($(this).scrollTop());
    if ($(this).scrollTop() > 60){
      $("#back-to-top").fadeIn();
    }else{
      $('#back-to-top').fadeOut();
    }

  });

  //#back-to-topがクリックされたら上に戻る
  // animateメソッドを使用
  $('#back-to-top a').click(function() {
      $('html, body').animate({
          scrollTop:0
      }, 800);
      return false;
  });

});

Rails5でjqueryを使ったスクロールボタンを実装

環境

事前準備

jquery / Bootsrap のインストール

補足：font-awesome-railsを導入

コード