【javascript】ページトップに戻るボタン

ページの下から一番上まで一気に飛べる魔法のボタンの復習です。

条件

• gem jquery-railsが導入済み
• htmlに<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>の記述があること
• 全ページに反映させること

ビューの記述

application.html.erb

:
:
      <span id="back">
        <a href="#top" class="scroll-top-btn">
          <i class="fas fa-chevron-circle-up" data-toggle=tooltip data-placement="bottom" title="トップへ移動"></i>
        </a>
      </span>
    
  </body>
</html>

-<span id="back">
<span>タグは、インライン要素をグループ化するために使用されます。id="back"は、この要素に一意のIDを割り当てます。

• <a href="#top" class="scroll-top-btn">
a href="#top"でリンク先をページトップに設定し、class="scroll-top-btn"でCSSで参照できるように要素を指定します。
• data-toggle=tooltip data-placement="bottom" title="トップへ移動"でツールチップを表示するために使用されます。

ツールチップとは

対象にカーソルを合わせると周辺に小さな領域が出現し、注釈や補足説明などが表示されるもの

CSSに記述

app/javascript/stylesheets/application.scss

// トップに戻るボタンの親要素
#back {
  position: fixed;
  // 画面上での位置を固定
  right: 20px;
  bottom: 20px;
}
// トップに戻るボタンのクラス
.scroll-top-btn {
  display: none;
  // 初期状態では非表示
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 99;
  // 他の要素よりも前面に表示されるようにする
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #f5f5f5;
  color: black;
  cursor: pointer;
  // マウスカーソルをポインターに変更
  padding: 15px;
  border-radius: 4px;
}
// マウスがボタン上に乗った時のスタイルを指定
.scroll-top-btn:hover {
  background-color: #555;
  color: white;
}

JavaScriptファイルの記述

app/javascript/packs/application.js

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('.scroll-top-btn').fadeIn();
    } else {
      $('.scroll-top-btn').fadeOut();
    }
  });

  $('.scroll-top-btn').click(function() {
    $('html, body').animate({scrollTop: 0}, 800);
    return false;
  });
});

• $(function() { ... });は、HTMLドキュメントが読み込まれた後に実行される関数です。
• $(window).scroll(function() { ... });は、ウィンドウがスクロールされたときに実行される関数です。
• $(this).scrollTop()は、現在のスクロール位置を取得します。
• $('.scroll-top-btn').fadeIn();は、トップに戻るボタンをフェードインさせます。
• $('.scroll-top-btn').fadeOut();は、トップに戻るボタンをフェードアウトさせます。
• $('html, body').animate({scrollTop: 0}, 800);は、アニメーションを使用してページのトップにスクロールします。

完成

ボタンがページ右下に現れ、カーソルを合わせると「トップへ移動」が出るようになりクリックするとページ最上オブに移動ができます。