初めに
JavaScriptにまだまだ慣れていません
今回はまず簡単そうな...トップに戻るボタンを設置してみました。
既にJqueryは導入済です。
ボタンを決める
今回は以下のアイコン素材から、矢印を入手しました！
ボタンの設置
とりあえず全ページに置きたいので、
application.html.erbに記述します。
<!DOCTYPE html>
<html>
<head>
<title>my port</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
</div>
<!--ヘッダーの内容は部分テンプレート-->
<%= render 'layouts/header' %>
<span id ="back"><a href="#"><%= image_tag asset_path("top3.png"), class:"back-img"%></a></span>
<%= yield %>
</body>
</html>
<span id ="back"><a href="#"><%= image_tag asset_path("top3.png"), class:"back-img"%></a></span>
でボタンを設置しています。
はページの上部を表します。
ちなみに、id=backとしてますが、classよりidで指定した方が
処理が早いそうです！
今のままだと位置が決まってないので位置をCSSで指定します。
ボタンの位置を決める
#back {
position: fixed;
right: 20px;
bottom: 20px;
}
.back-img {
width: 50px;
hover:none;
}
「position:fixed」は画面の決まった位置に固定する
ということです。今回右から,下から20pxのところに固定です。
.back-imgのところは、私は今回hover:none;にしましたが、
画像サイズだけの指定でOKです。
これでボタンを押せば上に戻ります
jQueryで動きを出す
$(function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});
(function() {で関数を定義します。
$('#back a').on('click',function(event){は、
以下のようになっています。
今回の場合だと、$('#id名 要素名')にしてるので、
id内のaタグがクリックされたら、処理が起こるようになります。
$('.セレクタ名').on('click', function() {
イベント発生時に行われる処理
});
イベントの記述方法については下記もありますので、click( )という
書き方もできますが、この場合クリックされた時点で
イベントが終わってしまいます。
$('.セレクタ名').イベント名(function(){
イベント発生時に行われる処理
});
次にクリックされたら何をするか ですが、以下の部分になります。
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
「animate(）」はJQueryの関数です。
以下のような使い方ができます。
$('セレクタ名').animate({
変化対象のプロパティ名:変化値
}, アニメーションの動作時間);
なので今回はscrollTop:0＝最上部に、
8００ミリ秒（0.8秒間）かけて移動するということになります。
event.preventDefault(); は、aタグの機能を無効にしています。
リロードしないと動かない場合
turbolinksが邪魔をしていますので、 以下のように無効化をします。document.addEventListener("turbolinks:load", function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});