
長いページ、特にランディングページなどでは良くあるページのトップに戻るボタン。
今回はそのボタンの作り方について解説していきます。
効率よくコーディングしたい人はこちら
事前準備(jQuery本体を読み込む)
まずは事前準備として、jQueryを使用するのでjQuery本体を読み込む必要があります。
jQueryを使ったことがない人はこちらの記事を参照下さい。
HTML
次にHTMLを書いていきます。
書く場所はfooterの下あたりでOKです。
<div id="page-top">
<a href="#">PAGE TOP</a>
</div>
まずはシンプルにテキストだけにしてみます。
CSS
次はCSSを書いていきます。
/* 右下に固定 */
#page-top a {
background-color: #1cb4d3;
bottom: 0;
color: #fff;
padding: 20px;
position: fixed;
right: 0;
}
今回は右下にピッタリ付ける位置に設置します。
jQuery
最後に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;
});
});
基本的にいじるのは数値の部分だけで大丈夫です。
最後の500の部分は数値が小さいほどトップへ戻るスピードが速くなります。
それでは一度見てみましょう(スマホで見る場合はResultをタップして下さい)
See the Pen
ページトップボタン① by junpei (@junpei-sugiyama)
on CodePen.
テキストを画像にしてみる
先ほどはテキストのボタンでしたが、画像にすることも可能です。
See the Pen
ページトップボタン(画像) by junpei (@junpei-sugiyama)
on CodePen.
つまりトップへ戻るボタンのデザインはテキストでも画像でもOKなので、自由にカスタマイズ出来ます。
サイトによって結構違うので、色んなサイトを見てみるのも面白いと思います。
以上です。
Brainランキング1位獲得 & 3日で500部突破 クチコミ約300件 今だけ!5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる!
(平均スコア)