【JavaScript初心者向け】TOPに戻るボタンの自作り方
今回もJavaScriptを使って、よくある「画面の一番上にスクロールして戻る」ボタンを作ってみたいと思います。
ちょっと分かりにくいかもですが、完成イメージはこんな感じ↓↓です。
これもWordPressではプラグインが公開されていたりしますが、
比較的簡単に作れますし、デザインも思い通りにできるので、オススメです。
まずはベースとなるHTMLです。だいぶシンプルですね。
|
1 2 3 |
<div class="topback-button"> <i class="fas fa-angle-up"></i> </div> |
1行目はボタン本体、
2行目はボタンの中に入れる文字列です。今回は「Font Awesome」のアイコンを使わせていただきました。
TOPに戻るボタンは画面内に固定表示するので、HTMLを入れる場所は<body></body>内ならどこでもOKです。
邪魔にならない場所に挿入してください。
続いて、デザインを決めるCSSです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.topback-button{ position: fixed; right: 4vw; bottom: 5vw; width: 10vw; height: 10vw; color: #333; background-color: #fff; border-radius: 5vw; font-size: 6vw; line-height: 10vw; text-align: center; box-shadow: 1.5vw 1.5vw 1.5vw 0 rgba(0,0,0,0.5); z-index: 10000; } |
画面をスクロールしても常に固定表示されるよう、position: fixed;、
画面右下に表示されるように画面右端（right）と画面下端（bottom）からの距離で位置を決めています。
ちなみにこのサイズ指定はスマホ表示でちょうどいいくらいのサイズになっているのでご注意を！
多少画面サイズが変わっても対応できるように単位をvwで指定しています。
13行目のbox-shadowで立体的に影を表示しています。
ここまでで、画面右下にこんな感じのボタンが表示されるようになると思います。
続いて、JavaScriptです。
わかりやすいので、jQueryを使っていきますが、
念のため、jQueryの使うための準備からおさらいしておきたいと思います。
自分のサイトでjQueryを使うには、ライブラリをダウンロードして参照する方法と、
CDN（Contents Delivery Network）と呼ばれるインターネット上に公開されているライブラリを参照する方法の2つがあります。
今回は後者の方法を採ります。
公開されているライブラリにもいくつか種類がありますが、
Google CDNを利用する場合はHTMLの<head>タグ内に以下のように記述します。
「3.4.0」は2019年4月25日時点のバージョンですので、使用する際には必ず最新版を確認してください。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> |
これで準備は完了です。
今回はHTML内にjQueryを埋め込む方法を採りたいと思います。
こちらも同じく<head>タグ内に以下の記述を追加します。
|
1 2 3 4 5 6 7 |
<script> jQuery(function($){ $('.topback-button').on('click', function(){ $('body, html').animate({scrollTop: 0}, 500, 'linear'); }) }) </script> |
3行目は「topback-button」クラスを持つ要素がクリックされたら、という記述、
4行目がアニメーションしながらページの一番上部へスクロールするという記述になります。
カスタマイズができる箇所としては、
「{scrollTop: 0}」の部分で画面上部から何pxの位置に移動するかを指定できます。
その後の「500」という数値はスクロールするアニメーションの速度、
最後の「’linear’」はアニメーション速度が終始一定という指定になります。
アニメーションの速度は、ページの縦の長さによって調節しないと、
早すぎたり遅すぎたりが出てくると思います。
ちなみに…
実はスクロールさせずに一瞬でトップまで戻すということも可能なんですが、
敢えてやっていません。
実装してみると分かるんですが、一瞬でトップまで戻ってしまうと、
何が起きたのかが分かりづらいんです。
なので、スクロールすることでトップに戻ったことが分かりやすいようにしています。
多くのトップに戻るボタンでスクロールするアニメーションが採用されているのは、
おそらくその辺りのユーザビリティが考慮されているんだと思われます。
ここまでで最低限の機能は実装できましたが、あと1つだけプラスしたいと思います。
トップに戻るボタンは画面を下にスクロールするまで使わないので、
画面の読み込み時にはボタンを非表示にしておき、
画面が少しでもスクロールされたらボタンを表示するという動きにします。
まずはCSSを以下のように修正します。
15行目以降が追記した箇所です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.topback-button{ position: fixed; right: 4vw; bottom: 5vw; width: 10vw; height: 10vw; color: #333; background-color: #fff; border-radius: 5vw; font-size: 6vw; line-height: 10vw; text-align: center; box-shadow: 1.5vw 1.5vw 1.5vw 0 rgba(0,0,0,0.5); z-index: 10000; <em> opacity: 0.0; transition: 2s;</em> } <em>.topback-button.transform { opacity: 0.7; transition: 2s; } .topback-button:hover { opacity: 1.0; cursor: pointer;</em> } |
続いて、jQueryです。
7〜14行目が追記した箇所です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> jQuery(function($){ $('.topback-button').on('click', function(){ $('body, html').animate({scrollTop: 0}, 500, 'linear'); }) <em> $(window).on('scroll',function(){ if($(window).scrollTop() > 0){ $('.topback-button').addClass('transform'); } else{ $('.topback-button').removeClass('transform'); } });</em> }) </script> |
画面がスクロールされた時にイベントを動かし、
「scrollTop()」…画面の一番上からスクロールされた距離（px）が0より大きかったら、
つまり少しでもスクロールされていたら、「topback-button」に「transform」クラスを追加する。
そうでなければ「transform」クラスを削除する、という動きになります。
「transform」クラスが追加された時の変化はCSSの20、21行目にあります。
訳すと、「透明度を70%にする（元は0%）」、「2秒間で」になります。
CSSの方はついでにマウスカーソルがボタンに重なった時の動きも25、26行目に入れています。
以上で終了です。
結構簡単にできますので、よかったら試してみてください！