[Rails]JavaScript(jQuery)でサーっとページトップに戻るボタン(FontAwesome)

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

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

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

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

![スクリーンショット 2021-07-14 21.49.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1554142/bff44f26-6884-fb8d-e855-cc518ddb1669.png)

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

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

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#前提

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

#手順

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

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

#ビューでボタンを配置

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

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

```erb: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 %>`の下に配置

```erb: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では２種類の処理を記述します。
①ページトップボタンの表示の処理
②ページの１番上まで戻る処理

別々に見ていきます。

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

```js:解説
// ページトップボタン表示、非表示
// 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');
    }
  });
});
```

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

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

Turbolinksに関する記事はこちら
[[Rails]リロードしないとJavaScript(jQuery)が動かない問題](https://qiita.com/nakachan1994/items/974f1d3c17d43446acb9)

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

```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を追加
>- 動きをつける

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

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

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

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