長いページ、特にランディングページ（LP）などで良くあるページトップに戻るボタン。
当ブログも少しスクロールしていくと、右下に灰色の上向きボタンが表示されます。
今回はそのボタンの作り方について解説していきます。
jQueryを使ったスクロールで表示されるページトップへ戻るボタンの作り方
まずはjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。
jQueryの使い方はこちらの記事を参照下さい。
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
そして今回の完成形はこちらになります。
See the Pen
ページトップボタン（スクロールすると出現） by junpei (@junpei-sugiyama)
on CodePen.
最初は非表示で少しスクロールしていくとボタンが表示されます。
コード解説
まずHTMLを書いていきます。
シンプルにテキストだけにしてみます。書く場所はfooterの下あたりでOKです。
<div id="page-top">
<a href="#">PAGE TOP</a>
</div>CSSはこちら。
/* 右下に固定 */
#page-top a {
background-color: #1cb4d3;
bottom: 0;
color: #fff;
padding: 20px;
position: fixed;
right: 0;
}ポイントはposition: fixed;とbottom: 0;、right: 0;で右下にピッタリ付ける位置に固定するところです。
余白が欲しい時はbottomとrightの数値で調整して下さい。
最後にjQueryです。
$(function () {
const pageTop = $("#page-top");
pageTop.hide(); // 最初はボタンを非表示にする
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { // 100pxスクロールしたら表示
pageTop.fadeIn(); // 100px以上スクロールしたらボタンをフェードイン
} else {
pageTop.fadeOut(); // 100px以下になったらボタンをフェードアウト
}
});
pageTop.click(function () {
$("body,html").animate(
{
scrollTop: 0, // 上から0pxの位置に戻る
},
500 // 500ミリ秒かけて戻る
);
return false;
});
});編集可能な箇所は以下になります。
const pageTop = $("#page-top");の#page-topはHTMLで書いたid名を書くif ($(this).scrollTop() > 100)の100はどのくらいスクロールしたら表示するか設定（単位はpx）- 最後の
500は何ミリ秒かけてページトップに戻るか設定
それではもう一度見てみましょう。
少しスクロールすると右下にボタンが表示されます。
See the Pen
ページトップボタン① by junpei (@junpei-sugiyama)
on CodePen.
ページトップボタンのテキストを画像にしてみる
先ほどはテキストのボタンでしたが、画像にすることも可能です。
See the Pen
ページトップボタン（画像） by junpei (@junpei-sugiyama)
on CodePen.
つまりページトップへ戻るボタンのデザインはテキストでも画像でもOKなので、自由にカスタマイズ出来ます。
もちろんコーディングの際には色んなデザインのページトップボタンがあるので、この記事をベースにデザイン通り実装できるようにしておきましょう。
まとめ
今回はjQueryを使ったページトップへ戻るボタンを作る方法を解説しました。
実務でもよくある実装なので、作れるようになっておきましょう。
以上になります。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
2023年12月31日まで！5大無料特典あり🎁
