ページトップ機能はいろんな実装方法があると思いますが、今回はJavaScript（jQuery)とFontAwesomeを使ったページトップへ戻るボタンの実装をしていきます。

スクロールが多いページだとページトップボタンは必須かなと考えます。

ただスマホの場合は指でスクロールが簡単にできるので、スマホのみのサービスの場合は必須とまではいかないかなと。（スマホではあまりページトップボタンクリックされてないみたいなデータがあったような、、、）

完成イメージはこちらです。(右下のボタン)

実際の動作を確認したい方は、ぼくのポートフォリオを確認してみてください。
ある程度スクロールしたら右下に出てくるので、クリックしてみてください。
サーッと１番上まで戻ります。

それではいってみましょう！

#開発環境

ruby 2.6.3
Rails 5.2.6

#前提

jQueryが使える状態
FontAwesomeが使える状態

#手順

ページトップ機能を実装する手順は3ステップです！

ビューでボタンを配置
CSSを追加
動きをつける

#ビューでボタンを配置

まずは、ビューにFontAwesomeを使ってボタンと要素を配置しています。

ボタンは全ビューで共通したものを使うのでapplication.html.erbのmainタグの中に記述していきます。
そのまま記述するとごちゃごちゃするので、部分テンプレート化しています。

views/layouts/_pagetop.html.erb

<div class="container">
  <div class="row">
    <div class="col-12">
      <!-- ページトップへ戻るボタン -->
      <p class="pagetop" style="display: none;">
        <a href="#">
          <!--ボタンの表示にはFontAwesomeを使用-->
          <i class="fas fa-chevron-up"></i>
        </a>
      </p>
    </div>
  </div>
</div>

<%= yield %>の下に配置

views/layouts/application.html.erb

:
<main>
  <%= yield %>
  <%= render 'layouts/pagetop' %>
</main>
:

#CSSを追加

CSSでは、
①ボタンの配置場所
②ボタンのデザイン
③FontAwesomeアイコンのデザイン
に関する記述をしていきます。

assets/stylesheets/homes.scss

/* ページTOPに戻る */
// ボタンの配置場所
.pagetop{
    display: block;
    position: fixed;
    right: 18px;
    bottom: 10px;
}
// ボタンのデザイン
.pagetop a{
    display: block;
    font-size: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    background: gray;
    border-radius: 50%;
    line-height: 50px;
}
// FontAwesomeアイコンのデザイン
.pagetop a i{
    font-size: 20px;
    color:#fff;
    line-height: 50px;
}

#動きをつける

JavaScriptでは２種類の処理を記述します。
①ページトップボタンの表示の処理
②ページの１番上まで戻る処理

別々に見ていきます。

####①ページトップボタンの表示の処理
どれだけスクロールしたかによって、ボタンを表示非表示させます。

解説

// ページトップボタン表示、非表示
// Turbolinks無効化(詳しくは過去記事参照)
$(document).on('turbolinks:load', function() {
  // 画面をスクロールを起点
  $(window).scroll(function () {
    // ページのトップの位置をnowに代入
    var now = $(window).scrollTop();
    // ページトップから1000pxスクロールしたら以下を実行
    if (now > 1000) {
      // ボタンがふわっと現れる
      $('.pagetop').fadeIn("slow");
    } else {
      // ボタンがふわっと消える
      $('.pagetop').fadeOut('slow');
    }
  });
});

####②ページの１番上まで戻る処理
表示されたボタンをクリックするとサーっとページの１番上まで戻っていきます。

解説

// ページトップへ戻るクリックで、スクロールして１番上に戻る
// Turbolinks無効化(詳しくは過去記事参照)
$(document).on('turbolinks:load', function() {
  $(function(){
    // ボタンクリックで発火
    $('.pagetop').click(function(){
      // アニメーションで速さを指定してサーっとページトップまで戻ります
      $('body,html').animate({
      scrollTop: 0},500);
      return false;
    });
  });
});

Turbolinksに関する記事はこちら
[Rails]リロードしないとJavaScript(jQuery)が動かない問題

最後にこの処理をまとめて記載しておきます。

assets/javascripts/application.js

// ページトップボタン表示
$(document).on('turbolinks:load', function() {
  $(window).scroll(function () {
    var now = $(window).scrollTop();
    if (now > 2500) {
      $('.pagetop').fadeIn("slow");
    } else {
      $('.pagetop').fadeOut('slow');
    }
  });
});
// ページトップへ戻るクリックで、スクロールして１番上に戻る
$(document).on('turbolinks:load', function() {
  $(function(){
    $('.pagetop').click(function(){
      $('body,html').animate({
      scrollTop: 0},500);
      return false;
    });
  });
});

これで、ページトップ機能が実装できました。

#まとめ

ページトップ機能を実装する手順は3ステップです！

ビューでボタンを配置

CSSを追加

動きをつける

今回は、かなりかんたんにページトップへ戻る機能を実装しました。

基本的なページトップ機能の実装方法が理解できたと思いますので、デザインを変更してみたり、スクロールする範囲を変えてみたり、１番上まで戻るスピードを変えてみたりと、いろいろ試してみてください。

自分で考えて試してみることで、もっと理解が深まって考えて実装できるようになるはずです！
頑張ってください！

最後まで見ていただきありがとうございました。