Zenn
🔝

【Rails】スクロールトップボタンの実装

2023/10/16に公開
CSS
HTML
JavaScript
jQuery
Rails
tech

トップへ戻るボタンの実装について説明します。

HTMLの記述

html
:
<body>
:
　<a href="#top" class="scroll-top-btn">
　　<i class="fas fa-chevron-circle-up" data-toggle=tooltip data-placement="bottom" title="最上部へ移動"></i>
　</a>
: 
</body>
:

a href="#top">はそのページの最上部へ移動するためのリンクです。
ここではFontAwesomeを使用しています。またアイコンにツールチップ（説明文）を追加しています。

CSSの記述

CSSを記述します。

app/assets/stylesheets/application.css
/* スクロールボタン */
.scroll-top-btn {
  display: none; /* ボタンを初めは非表示に */
  position: fixed; /* ボタンを画面に固定 */
  bottom: 5%; /* 画面の下から5%の位置に配置 */
  right: 2%; /* 画面の右から2%の位置に配置 */
  width: 40px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ */
  background-color: #BDDF38; /* ボタンの背景色 */
  border-radius: 50%; /* ボタンの角を丸くする */
  display: flex; /* ボタン内の要素を横並びに配置 */
  align-items: center; /* ボタン内の要素を縦方向中央に配置 */
  justify-content: center; /* ボタン内の要素を横方向中央に配置 */
  color: #fff; /* テキストの色を白に設定 */
  font-size: 24px; /* テキストのフォントサイズ */
  text-decoration: none; /* テキストの下線を削除 */
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* ホバー時のトランジション効果の設定 */
  z-index: 9999; /* ボタンを最前面に */
}

.scroll-top-btn:hover {
  background-color: #9ECA2D; /* ホバー時の背景色変更 */
  text-decoration: none; /* テキストの下線を削除 */
  color: #fff; /* ホバー時のテキストの色変更 */
  transform: scale(1.1); /* ホバー時の拡大率変更 */
}

JavaScriptの記述

jQueryでイベントを設定するため、jQueryを導入していきます。

jQueryの導入

今回はyarnを使用し導入。

ターミナル
yarn add jquery

jQueryが使用できるように設定していく。

config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
  })
)

jQueryをimportする。

app/javascript/packs/application.js
import 'jquery'

これでjQueryの使用準備が完了。

jsファイルの作成とimport

app/javascriptディレクトリ内にscript.jsというファイルを作成します。
次に、作成したファイルをimportします。

app/javascript/packs/application.js
import "script.js";

jsファイルの記述

script.js
$(document).ready(function() {
  // スクロールトップボタンをクリックしたときの処理
  $('.scroll-top-btn').click(function(e) {
    e.preventDefault(); 
    $('html, body').animate({ scrollTop: 0 }, 'slow'); // ページトップへスクロール
  });

  // ページが100ピクセルまでスクロールされたらボタンを表示
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('.scroll-top-btn').fadeIn();
    } else {
      $('.scroll-top-btn').fadeOut();
    }
  });
});

if ($(this).scrollTop() > 100)は、ページのスクロール位置が100ピクセル以上かどうかをチェックしています。もし100ピクセル以上であれば、スクロールボタンを表示し、それ以外の場合は非表示にしています。
.fadeIn()と.fadeOut()は、ボタンをフェードイン、フェードアウトさせるためのアニメーションです。

以上、スクロールボタンの実装でした。

Discussion