ページトップへ戻るボタンの作り方
WEBサイトを見ているとページをスクロールしていくと右下とかによく見かけるページの最上部に戻るボタンのアローボタンタイプの作り方を備忘録も兼ねて簡単にまとめました。
簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです！
目次
ページトップに戻るボタンを作るには？
まずは土台となるHTMLを記述していきます。
その後、土台（HTML）を記述できたらその土台をもとにCSSで装飾やボタンの表示位置を指定し、jQueryでページトップに戻るボタンが押し下しされた時の動作（処理）を記述していきます。
HTMLを記述していこう
下記のように土台となるHTMLを記述します。
class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です！
ただ、class名js-pagetopは最初にjsと書かれている通り、後から「jQuery」で使用するのでこちらで変更した際は「jQuery」側のclass名も同じ箇所を変更するようご注意ください。
classはできるだけ「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名とで分けて使い、分かりやすいように「JavaScript・jQuery」で使うclass名には先頭にjs-のような感じのclass名をつけた方がいいかと思います！
<div class="pageTop js-pagetop">
<span class="pageTop__icon"></span>
</div>CSSで装飾してボタンの見た目を作ろう
土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して装飾をし、ボタンのデザインを形作っていきます。
装飾が正常にできたらデモページでも右下に出てくるページトップに戻るボタンのデザインになります。
/*------------------------------
pageTop
------------------------------*/
.pageTop {
position: fixed;
right: 50px;
bottom: 50px;
width: 50px;
height: 50px;
background-color: #202f55;
border-radius: 50%;
transition: 0.3s bottom 0s ease;
opacity: 0.6;
z-index: 50;
cursor: pointer;
}
.pageTop:hover {
opacity: 0.9;
}
.pageTop__icon {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.pageTop__icon::after,
.pageTop__icon::before {
content: "";
position: absolute;
top: 24px;
width: 12px;
height: 3px;
border-radius: 3px;
background-color: #fff;
}
.pageTop__icon::before {
left: 16px;
transform: rotate(-45deg);
}
.pageTop__icon::after {
right: 16px;
transform: rotate(45deg);
}各指定箇所の簡単な説明
簡単に説明しますとまずは下記大枠の部分、class名pageTopを今回は丸型のボタンにしようと思いますので丸型になるようstyleを追加し、表示位置も右下になるよう指定していきます。
また、よくありがちな「hover」時にアニメーションで色が変化するよう今回はopacityの値を変化させて色が変化するように見せる感じで記述しています。
.pageTop {
position: fixed;
right: 50px;
bottom: 50px;
width: 50px;
height: 50px;
background-color: #202f55;
border-radius: 50%;
transition: 0.3s bottom 0s ease;
opacity: 0.6;
z-index: 50;
cursor: pointer;
}
.pageTop:hover {
opacity: 0.9;
}その後、下記の「くの字矢印」部分、class名pageTop__iconを「くの字矢印」になるようstyleを追加し、矢印の表示位置も丸型ボタンの中心付近にくるよう指定していきます。
.pageTop__icon {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.pageTop__icon::after,
.pageTop__icon::before {
content: "";
position: absolute;
top: 24px;
width: 12px;
height: 3px;
border-radius: 3px;
background-color: #fff;
}
.pageTop__icon::before {
left: 16px;
transform: rotate(-45deg);
}
.pageTop__icon::after {
right: 16px;
transform: rotate(45deg);
}jQueryを記述してページ上部に戻る処理を追加しよう
CSSでの装飾によりボタンの見た目はできたもののそれだけではボタンを押し下ししても何も動作しません。
そこでjQueryでボタンを押し下しした際に実行したい動作（処理）を追加してページの最上部にスクロールして戻るような処理を下記のように記述し、追加していきます。
// PageTop
$(function () {
$('.js-pageTop').on('click', function () {
$('html, body').animate({scrollTop: 0}, 500, 'swing'); // 0.5秒かけてページトップへ戻る
});
});処理内容の簡単な説明
下記ハイライト部分はclass名js-pageTopが追加されている要素がクリックされたらjQuery記述の5行目（ハイライト部分）に書いてある});までの間に書かれている処理を実行してくださいというような内容です。
// PageTop
$(function () {
$('.js-pageTop').on('click', function () {
$('html, body').animate({scrollTop: 0}, 500, 'swing'); // 0.5秒かけてページトップへ戻る
});
});そして指定された要素がクリックされた時に下記ハイライト部分の処理が実行されページの最上部にスクロールされます。
scrollTop: 0の部分はブラウザの画面のページ最上部から「0」の距離にスクロールしてねと指定しています。
その後に書いてある「500」の部分はコメントアウトにも書いてあります通り、duration（時間）の指定で500ms（ミリ秒）かけてアニメーション（スクロール）していってねという指定です。
最後のswingの部分はeasingの種類を指定しています。（linearとswingの2種類を文字列で設定できます。）
// PageTop
$(function () {
$('.js-pageTop').on('click', function () {
$('html, body').animate({scrollTop: 0}, 500, 'swing'); // 0.5秒かけてページトップへ戻る
});
});注意
jQueryが動作しないけどなんでだろうという時はまずjQueryが読み込まれているか確認してください。
読み込まれていない場合は公式サイトからダウンロードしてサイトに追加して読み込むか、CDN経由でjQueryライブラリを読み込ませましょう。
CDN経由の場合は実行させたい今回記述したjQueryより前の箇所に下記コードのように（jQuery CDN公式サイトより引用）追記しましょう。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>jQuery公式サイト
各種CDNの公式サイト
まとめ
今回は「ページトップへ戻るボタン」について簡単にはなりますが、HTML・CSS・jQueryでの作り方を説明させていただきました！
「クリックイベント」や「animate」などもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。
参考サイト
クリックイベント
animate()
デモページ
デモページはこちらになります。
See the Pen ページトップへ戻るボタン by hiroyuki.miyauchi (@hiromiya) on CodePen.
※各言語ボタンを押し下し、ソースコードをLIVE（リアルタイム）で書き換えて表示・実行結果を確認できます。
最後にもう一度ポイントをおさらい
- 「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名は別に分けて使いわけよう
- ボタンは自身で装飾できるならどんなデザインでもOKなのでカスタマイズしたり自身で作成してみよう
- 「animate」部分の「durationはミリ秒」で指定し、「easingは文字列」で指定する
初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。
