目標
開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina
前提
※ ▶◯◯ を選択すると、説明等が出てきますので、
よくわからない場合の参考にしていただければと思います。
上記機能はなくても大丈夫です。
流れ
1 写真の用意
2 viewの編集
3 cssの編集
4 jsファイルの編集（ページスクロールにアニメーションを追加する場合)
写真の用意
このような画像を用意してください。
ちなみにこの画像はipadで作成しましたので、ご自由にお使いください。
画像ファイルをapp/assets/images配下に格納してください。
viewの編集
今回は全てのページで表示したいため、下記場所に記載。
app/views/layouts/application.html.erb
<body>
<%= yield %>
<span id="back">
<a href="">
<%= image_tag asset_path('arrow.jpg'), data: {"turbolinks"=>false}, class: "arrow" %>
</a>
</span>
</body>
補足【image_tag asset_path( )】
app/assets/images配下の画像を読み込むことが出来ます。補足【data: {"turbolinks"=>false}】
turbolinksの誤作動を防ぎます。cssの編集
app/application.css
#back {
position: fixed;
right: 20px;
bottom: 20px;
}
.arrow{
width: 50px;
height: 50px;
}
補足【position: fixed;】
position: fixed;により表示する場所を固定しています。jsファイルの編集
gem 'jquery-rails'を導入しておいてください。
マウスでクリックするとアニメーションを動作させます。
app/assets/javascripts/application.js
$(function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});