目標
よくWebページで見るトップへ戻るボタン（画像右下）を作成します。
開発環境
Rails 6.1.4
ruby 2.6.3
目次
- Viewページの作成
- CSSファイルの作成
- jQueryの定義（jsファイルの作成）
Viewページの作成
まずトップへ戻るボタンとして使用したい画像を用意します。
今回は下記の画像使用。
下記のように記述します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<span id="back">
<a href="#">
<img src="img/arrow.png" alt="">
</a>
</span>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
bodyの終了タグの直前で、jquery.min.jsファイルとscript.jsファイルを読み込みます。
CSSファイルの作成
次に、CSSファイルを作成します。
style.css
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#back {
position: fixed;
right: 20px;
bottom: 20px;
}
#back img {
width: 50px;
}
ファイル保存後、ブラウザで確認をしてみます。
このまま「トップへ戻る」ボタンをクリックすると、
一瞬でページ最上部へ移動してしまいます。
トップまでスーッとスクロールしてほしいですよね？
ここでjQueryの出番です。
jQueryの定義（jsファイルの作成）
script.jsファイルに、下記のように記述します。
今回は各ファイルをjsフォルダに格納してます。
js/script.js
$(function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});
これで再度ブラウザで確認をすると、上までスーッと移動します！
上記のアニメーション効果を設定部分（下記）のアニメーション動作時間は
ミリ秒で指定する以外にも「slow」,「normal」,「fast」で指定することも可能です。
$('セレクタ名').animate({
変化対象のプロパティ名:変化値
}, アニメーションの動作時間);
お疲れ様でした！
あくまで備忘録なので足りない説明等多々あるかと思います。
行き詰まった際の助けになれば幸いです。