長いページ、特にランディングページ（LP）などで良くあるページトップに戻るボタン。
当ブログも少しスクロールしていくと、右下に灰色の上向きボタンが表示されます。
今回はそのボタンの作り方について解説していきます。
目次
jQueryを使ったスクロールで表示されるページトップへ
戻るボタンの作り方
まずはjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。
そして今回の完成形はこちらになります。
出力結果
最初は非表示で少しスクロールしていくとボタンが表示されます。
コード解説
まず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は何ミリ秒かけてページトップに戻るか設定
それではもう一度見てみましょう。
少しスクロールすると右下にボタンが表示されます。
出力結果
ページトップボタンのテキストを画像にしてみる
先ほどはテキストのボタンでしたが、画像にすることも可能です。
出力結果
つまりページトップへ戻るボタンのデザインはテキストでも画像でもOKなので、自由にカスタマイズ出来ます。
もちろんコーディングの際には色んなデザインのページトップボタンがあるので、この記事をベースにデザイン通り実装できるようにしておきましょう。
