[jQuery] トップへ戻るボタンの実装サンプル
画面右下によくある「 Page Top 」とか「ページトップへ戻る」ボタンの jQuery を使ったコードサンプル。
スクロールしたらボタンが表示されるバージョン。 ボタンに FontAwsome を使ったりデザインによって CSS が変わるが、 jQuery で作成する動きの部分は共通して使える。
基本的なコード
「 TOP 」とだけ書かれたボタンのサンプルコード。 四角形に文字列を表示しているだけなので、CSS もシンプル。
デモ
See the Pen Top Page Button Demo by AgoPeanuts (@AgoPeanuts) on CodePen.
HTML
jQuery ライブラリを読み込む。
head
タグ内に下記コードを書く。このコードは CDN からロードさせている。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
「 TOP 」ボタンを追加する。
<div id="page_top"><a href="#">TOP</a></div>
body
終了タグの手前とか、下の方に書いておく。
CSS で、 position: fixed;
で位置を固定するので、どこに書いてもいいと思う。
PHP でインクルードしまくって、表示部分が複雑になってるときは、HTML コードの上の方に書いたりしている。
jQuery
$(function(){
var pagetop = $('#page_top');
// ボタン非表示
pagetop.hide();
// 100px スクロールしたらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
ボタン非表示をここ( jQuery )に書いているが、 CSS で display: none;
としてもいい。
animate()
の 500
はスクロールするときの時間間隔を指定していて、これだと 0.5 秒かけてスクロールする。よって、数値が小さいほど速くなる。
CSS
#page_top {
position: fixed;
bottom: 30px;
right: 20px;
}
#page_top a {
background-color: #999;
color: #fff;
text-align: center;
text-decoration: none;
padding: 20px 20px;
}
#page_top a:hover {
background-color: #666;
text-decoration: none;
}
ボタンの角を丸角にしたければ border-radius
を使い、矢印とかのアイコンを使いたい場合は FontAwsome とかを導入する。
「トップへ戻る」ボタンのデザインサンプル
Font Awesome を使う場合は、CDN を使って HTML の head
タグ内で読み込む
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
See the Pen page top button sample design by AgoPeanuts (@AgoPeanuts) on CodePen.