対象者
* 画面にTopに移動するボタンを作成したい方
目的
- 下にスクロールしてもすぐに画面の一番上に移動できるようにする
実際の手順と実例
1.画像の用意
まず画像を準備します。
何でも大丈夫ですが、下記のファイルを使用して頂いて大丈夫です。
こちらの画像を
app/assets/imagesに格納します。
2.Viewの設定
今回はすべてのページで表示したいので
application.html.erbへ記載します。
app/views/layout/application.html.erb
<body>
<%= yield %>
<span id="back">
<a href="">
<%= image_tag asset_path('arrow.png'), data: {"turbolinks"=>false}, class: "arrow" %>
</a>
</span>
</body>
- 画像の拡張子は画像によって変えてください
3.CSSファイルの設定
#back {
position: fixed;
right: 20px;
bottom: 20px;
}
.arrow{
width: 50px;
height: 50px;
}
position:fixed;で場所を固定します。
その下でどの位置に固定するかを決めます。
4.jsファイルの設定
gem jquery-rails
上記をGemfileに加えてbundle installを実行
app/assets/javascripts/application.js
$(function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});
クリックした際に上記へスクロールします。
0のかh祖は変化値 → ０なので一番上に繊維
800はアニメーション動作時間なので数字を変えると動作スピードが変わります。
投稿者コメント
最近実装してみたので、改めて復習してみました。
他にもjQueryを使用して色々実装してみたいと思います。
My Profile
プログラミング学習歴３ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。