【jQuery】フッター手前で止まるページトップボタンの作り方

こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！

今回は、

フッターに重ならないようにページトップボタンを作りたいけどどうすればいいんだろう？

といった方に対する記事となります。

以前こちらで紹介したページトップボタンの作り方は一番下にピッタリくっついた状態で表示され、一番下にスクロールされるまでそのままというタイプでした。

しかし実際のサイトでは一番下にはフッターがあり、フッターに重ならないようにページトップボタンは少し上に表示させるか、フッターまでは一番下に表示させ、フッターまで来たらそこで止まるようにします。

今回は後者の作り方を解説していきます。

1 今回の完成形
2 HTML
3 CSS
4 jQuery

今回の完成形

まずは今回の完成形を見てみます。

See the Pen
フッター手前で止まるページトップボタン by junpei (@junpei-sugiyama)
on CodePen.

フッターまでは一番下に表示されますが、フッターの手前でボタンは止まるようになっています。

HTML

それでは順番に解説していきます。

ただし以前ご紹介したページトップボタンの作り方と共通する部分は省略するので、ページトップボタンの作り方については以下の記事を参照下さい。

フォトグラファーのWeb制作日記

2020-05-14 08:00:09

【jQuery】コピペでOK！スルスルっとトップへ戻るボタンの作り方

https://junpei-sugiyama.com/page-top/

こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！今回は、よくサイトの下の方に出現するページのトップに戻るボタンってどうやって作るんだろう？といった方に対する記事となります。長いページ、特にランディングページなどでは良くあるページのトップに戻るボタン。今回はそのボタンの作り方について解説していきます。事前準備（jQuery本体を読み込む）まずは事前準備として、jQueryを使用するのでjQuery本体を読み込む必要があります。jQueryを使ったことがない人はこちらの記事を参...

HTMLに関しては基本的に上記の記事にフッターが追加されただけです。

<footer class="footer">
  <p>
    Copyright © 2020 フォトグラファーのWeb制作日記
  </p>
</footer>

CSS

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

そしてjQueryです。

これもページトップボタンについては省略します。

今回追加されたのは以下のコードです。

$(document).ready(function () {
  $("#page-top").hide();
  $(window).on("scroll", function () {
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    footHeight = $("footer").innerHeight();
    if (scrollHeight - scrollPosition <= footHeight) {
      $("#page-top").css({ position: "absolute", bottom: footHeight + 0 });
    } else {
      $("#page-top").css({ position: "fixed", bottom: "0" });
    }
  });
});

コピペして頂ければ使えますが、ここで少しカスタマイズ可能な箇所について説明します。

それは以下の2か所です。