こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！
今回は、
よくサイトの下の方に出現するページのトップに戻るボタンってどうやって作るんだろう？
といった方に対する記事となります。
長いページ、特にランディングページなどでは良くあるページのトップに戻るボタン。
今回はそのボタンの作り方について解説していきます。
事前準備（jQuery本体を読み込む）
まずは事前準備として、jQueryを使用するのでjQuery本体を読み込む必要があります。
jQueryを使ったことがない人はこちらの記事を参照下さい。
HTML
次にHTMLを書いていきます。
書く場所はfooterの下あたりでOKです。
<div id="page-top">
<a href="#">PAGE TOP</a>
</div>まずはシンプルにテキストだけにしてみます。
CSS
次はCSSを書いていきます。
/* 右下に固定 */
#page-top {
bottom: 0;
position: fixed;
right: 0;
}
/* 背景色、文字色、paddingで幅と高さ */
#page-top a {
background-color: #1cb4d3;
color: #fff;
padding: 0.5rem 1rem;
}今回は右下にピッタリ付ける位置に設置します。
jQuery
最後にjQueryを書いていきます。
$(function () {
const topBtn = $("#page-top");
topBtn.hide(); // 最初はボタンを非表示にする
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { // 100px以上スクロールしたら・・・
topBtn.fadeIn(); // 100px以上スクロールしたらボタンをフェードイン
} else {
topBtn.fadeOut(); // 100px以下になったらボタンをフェードアウト
}
});
topBtn.click(function () {
$("body,html").animate(
{
scrollTop: 0, // 上から0pxの位置に戻る
},
500 // 500ミリ秒かけて戻る
);
return false;
});
});基本的にいじるのは数値の部分だけで大丈夫です。
最後の500の部分は数値が小さいほどトップへ戻るスピードが速くなります。
それでは一度見てみましょう（スマホで見る場合はResultをタップして下さい）
See the Pen
ページトップボタン① by junpei (@junpei-sugiyama)
on CodePen.
テキストを画像にしてみる
先ほどはテキストのボタンでしたが、画像にすることも可能です。
See the Pen
ページトップボタン（画像） by junpei (@junpei-sugiyama)
on CodePen.
つまりトップへ戻るボタンのデザインはテキストでも画像でもOKなので、自由にカスタマイズ出来ます。
サイトによって結構違うので、色んなサイトを見てみるのも面白いと思います。
以上です。
