jQuery Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

しかし実際のサイトでは一番下にはフッターがあり、以下のどちらかであることが多いです。

  1. フッターに重ならないようにページトップボタンは少し上に表示させる
  2. フッターまでは一番下に表示させ、フッターまで来たらそこで止まる

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

jQueryを使ったフッター手前で止まるページトップへ戻るボタンの作り方

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

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

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

今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryの使い方はこちらの記事を参照下さい。

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

 

コード解説

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

ページトップボタンの作り方は以下の記事に書いているので、共通する部分の解説は割愛します。

あわせて読みたい
【コピペOK!】jQueryを使ったスクロールで表示されるページトップへ戻るボタンの作り方
【コピペ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;時の位置をフッターの高さに設定しているのがポイントですね。

まとめ

今回はフッター手前で止まるページトップへ戻るボタンの作り方を解説しました。

実務で使うことはあまりないかも知れませんが、もしあればこちらの記事が参考になればと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作