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

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

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

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

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

フッター手前で止まるページトップボタン

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

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

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

HTML

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

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

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

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か所です。

bottom: footHeight + 0,
bottom: "0",

まず1行目ですが、フッターの手前何pxで止めるかどうかを決める数値です。

上記では0なのでフッターにピッタリくっついていますが、これを30にすると以下のようになります。

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

ピッタリではなく少し余白を付けたい時に使えますね。

そして2行目ですが、これは表示がされた時の位置になります。

上記では0なので表示された時には一番下にピッタリくっついていますが、これを30pxにすると以下のようになります。

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

1行目の設定とは少し違うのが分かると思います。

ただフッターが出現した瞬間フッターにピッタリくっついてしまうので、数値の調整には気を付けて下さい。

以上です。