トップへ戻るボタンの実装方法【jQueryとFont Awesome】
こんにちは！スズキです。
今回はjQueryとFont Awesomeを使った、「トップへ戻るボタン」の実装方法を紹介します。
多くのwebサイトには、「トップへ戻るボタン」が用意されています。
クリックすると一瞬でサイトの上部に移動するあのボタンです。
これはjQueryを使えば簡単に実装することができます。
また、Font Awesomeを利用すれば、好きなアイコンをボタンにすることができます。
記事の内容
- HTML
- CSS
- jQuery
スポンサードサーチ
HTML
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="pageTop.js"></script>
<!-- Font Awesome読み込み -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
まずはheadタグ内で、jQueryのライブラリとFont AwesomeのCDNを読み込みます。
注意点として、jQueryライブラリを読みこんだ後にjsファイルを読み込むようにしましょう。
順番を間違えると、ボタンが作動しません。
<!-- ボタン作成 -->
<div id="page-top">
<!-- 好きなアイコンを選択 -->
<i class="fas fa-hand-point-up"></i>
</div>
次に、bodyタグ内でボタンを作成します。
Font Awesomeのサイトから好きなアイコンを選び、コードをコピペします。
CSS
/* ボタンを右下に表示する */
#page-top {
position: fixed;
bottom: 30px;
right: 30px;
}
/* ボタンの色を変更 */
#page-top i {
color: red;
}
/* ボタンをホバーしたときにカーソルを変更 */
#page-top i:hover {
cursor: pointer;
}次にCSSを書いていきます。
主に、ボタンの表示位置、色やホバー時について指定すればOKだと思います。
スポンサードサーチ
jQuery
$ (function(){
// 変数宣言と代入
let pageTop = $('#page-top');
// ボタン非表示
pageTop.hide();
// 80pxスクロールしたらボタン表示
$ (window).scroll(function () {
if ($(this).scrollTop() > 80) {
// 0.3秒でフェードイン
pageTop.fadeIn(300);
} else {
// 0.3秒でフェードアウト
pageTop.fadeOut(300);
}
});
// 0.5秒でページトップへ戻る
pageTop.click(function () {
$('body, html').animate({ scrollTop: 0}, 500);
return false;
})
})最後にjQueryを書いていきます。
上記のコードの流れとして、まずはボタンを非表示にしておきます。
そして、下にスクロールしていくと、0.3秒かけてボタンを表示させます。
表示されたボタンをクリックすると、0.5秒かけてページ上部に移動します。
ボタンを表示するタイミング、フェードインとフェードアウトの時間、ページ上部に移動するまでの時間を適宜変更してください。
まとめ
いかがでしたか。
わずかこれだけのコードで、「トップへ戻るボタン」を実装できました。
今回はFont Awesomeを利用しましたが、もちろんテキストなどでもOKです。
簡単なのでぜひ試してみてください。
以上です。
コーディングを学ぶならデイトラ
動画でプログラミングを学ぶなら
オンラインスクールでプログラミングを学ぶなら