フッターに重ならないようにページトップへ戻るボタンを作りたいけどどうすればいいんだろう？
以前こちらで紹介したページトップボタンの作り方は、一番下にピッタリくっついた状態で表示され、一番下にスクロールされるまでそのままというタイプでした。
しかし実際のサイトでは一番下にはフッターがあり、以下のどちらかであることが多いです。
- フッターに重ならないようにページトップボタンは少し上に表示させる
- フッターまでは一番下に表示させ、フッターまで来たらそこで止まる
そして今回は後者の作り方を解説していきます。
今だけ！5大無料特典あり🎁
jQueryを使ったフッター手前で止まるページトップへ戻るボタンの作り方
まずは今回の完成形を見てみます。
See the Pen
フッター手前で止まるページトップボタン by junpei (@junpei-sugiyama)
on CodePen.
フッターまでは一番下に表示されますが、フッターの手前でボタンは止まるようになっています。
今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。
jQueryを使ったことがない人はこちらの記事を参照下さい。
参考記事
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方についても分かりやすく解説
続きを見る
コード解説
それでは順番に解説していきます。
ページトップボタンの作り方は以下の記事に書いているので、共通する部分の解説は割愛します。
参考記事
-
【コピペOK！】jQueryを使ったスクロールで表示されるページトップへ戻るボタンの作り方
続きを見る
HTMLに関しては基本的に上記の記事にフッターが追加されただけです。
<footer class="footer">
<small>Copyright © 2022 じゅんぺいブログ</small>
</footer>CSSについても先ほどの記事とほぼ同じで、フッターのCSSが追加されたのと、1つ違う点はbodyにposition: relative;が追加された点です。
body {
position: relative;
}
.footer {
background-color: #000;
padding: 20px 0;
}
.footer p {
color: #fff;
font-size: 16px;
text-align: center;
}そしてjQueryですが、ページトップボタンについてはこちらの記事と同じです。
今回追加されたのは『フッター手前でストップ』以下のコードです。
// ページトップボタン
$(function () {
const pageTop = $("#page-top");
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$("body,html").animate(
{
scrollTop: 0,
},
500
);
return false;
});
// フッター手前でストップ
$("#page-top").hide();
$(window).on("scroll", function () {
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $("footer").innerHeight();
if (scrollHeight - scrollPosition <= footHeight) {
// ページトップボタンがフッター手前に来たらpositionとfixedからabsoluteに変更
$("#page-top").css({
position: "absolute",
bottom: footHeight,
});
} else {
$("#page-top").css({
position: "fixed",
bottom: "0",
});
}
});
});コピペして頂ければ使えます。
ここでやっていることは以下になります。
- ページトップボタンがフッター手前に来たらpositionをfixedからabsoluteに変更
- さらにbottomはフッターの高さを取得に設定（footHeight）
bottom: footHeight,でposition: absolute;時の位置をフッターの高さに設定しているのがポイントですね。
以上になります。
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
今だけ！5大無料特典あり🎁
