ページトップ機能はいろんな実装方法があると思いますが、今回はJavaScript（jQuery)とFontAwesomeを使ったページトップへ戻るボタンの実装をしていきます。
スクロールが多いページだとページトップボタンは必須かなと考えます。
ただスマホの場合は指でスクロールが簡単にできるので、スマホのみのサービスの場合は必須とまではいかないかなと。（スマホではあまりページトップボタンクリックされてないみたいなデータがあったような、、、）
完成イメージはこちらです。(右下のボタン)
実際の動作を確認したい方は、ぼくのポートフォリオを確認してみてください。
ある程度スクロールしたら右下に出てくるので、クリックしてみてください。
サーッと１番上まで戻ります。
それではいってみましょう！
開発環境
ruby 2.6.3
Rails 5.2.6
前提
- jQueryが使える状態
- FontAwesomeが使える状態
手順
ページトップ機能を実装する手順は3ステップです！
- ビューでボタンを配置
- CSSを追加
- 動きをつける
ビューでボタンを配置
まずは、ビューにFontAwesomeを使ってボタンと要素を配置しています。
ボタンは全ビューで共通したものを使うのでapplication.html.erbのmainタグの中に記述していきます。
そのまま記述するとごちゃごちゃするので、部分テンプレート化しています。
<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 %>の下に配置
:
<main>
<%= yield %>
<%= render 'layouts/pagetop' %>
</main>
:
CSSを追加
CSSでは、
①ボタンの配置場所
②ボタンのデザイン
③FontAwesomeアイコンのデザイン
に関する記述をしていきます。
/* ページ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)が動かない問題
最後にこの処理をまとめて記載しておきます。
// ページトップボタン表示
$(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を追加
- 動きをつける
今回は、かなりかんたんにページトップへ戻る機能を実装しました。
基本的なページトップ機能の実装方法が理解できたと思いますので、デザインを変更してみたり、スクロールする範囲を変えてみたり、１番上まで戻るスピードを変えてみたりと、いろいろ試してみてください。
自分で考えて試してみることで、もっと理解が深まって考えて実装できるようになるはずです！
頑張ってください！
最後まで見ていただきありがとうございました。