2022/4/24

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

Coding

フッター手前で止まるトップへ戻るボタンってどうやって作るの？

そんな疑問にお答えします。

以前にトップへ戻るボタンの作り方を紹介しました。

もうコピペから脱出！トップへ戻るボタンを基礎から理解する【jQuery】

この中ではボタンの位置は一番下に固定していました。

しかし実際は一番下にはフッターがあります。

そしてフッターに重なると見えづらいケースはよくあります。

そのような場合のために今回は、「フッターまでは一番下に表示させ、フッターまで来たらその手前で止まるボタン」の作り方を紹介します。

1 フッター手前で止まるトップへ戻るボタン
2 完成形
3 コード解説
4 カスタマイズ

フッター手前で止まるトップへ戻るボタン

まずは現状とゴールを確認しておきます。

↓これが現状

フッターによってトップへ戻るボタンがほとんど見えません。

↓そしてこれがゴール

フッター手前で止まります。

完成形

完成形はこちらです。

See the Pen
フッター手前で止まるトップへ戻るボタン by toshi (@toshi78)
on CodePen.

フッターまでは一番下に表示させ、フッターまで来たらその手前で止まるのが確認できると思います。

コード解説

それではコードを見ていきましょう。

ただし今回はトップへ戻るボタンについての解説は省略します。

トップへ戻るボタン実装の解説は以前の記事をご覧ください。

もうコピペから脱出！トップへ戻るボタンを基礎から理解する【jQuery】

HTML

HTMLの枠組みは以下のとおりとなっています。

トップへ戻るボタンはフッターの下に配置しています。

<body>
    <header></header>
    <main>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
    <div id="js-pagetop">
        <a href="#">TOP</a>
    </div>
</body>

CSS

CSSでのポイントは1点です。

それは「position: relative;」の指定です。

これはあとに出てくるjQueryのif文の中で「position: absolute;」を使うため、それに対する準備です。

今回はbodyに対して指定していますが、つねにというわけではありません。

指定するのはトップへ戻るボタンの親要素に対してです。

ですのでHTMLの組み方次第で指定する場所は変わります。

body {
  position: relative; /* 親要素に指定 */
}

jQuery

//フッター手前で止まるボタン
$(document).ready(function () {
  $("#js-pagetop").hide();
  $(window).on("scroll", function () {
    scrollHeight = $(document).height(); //ドキュメントの高さ
    scrollPosition = $(window).height() + $(window).scrollTop(); //現在の位置
    footHeight = $("footer").innerHeight(); //フッターの高さ
    if (scrollHeight - scrollPosition <= footHeight) { //ドキュメントの高さと現在の位置の差がフッターの高さ以下のとき
      $("#js-pagetop").css({ position: "absolute", bottom: footHeight + 0 }); //pisitionをabsoluteに変更
    } else { //それ以外の場合は
      $("#js-pagetop").css({ position: "fixed", bottom: "0" }); //固定で表示
    }
  });
});

コードは多少長いですが、指定している内容は単純明快です。

ポイントは「if (scrollHeight – scrollPosition <= footHeight) {」の部分。

ここでは「ドキュメントの高さと現在の位置の差がフッターの高さ以下のとき」とそうでないときの処理をそれぞれ書くということです。

💡ポイント！　

$(document).height() → 読み込んだページの全高さ
$(window).height() → ブラウザウィンドウの高さ
$(window).scrollTop() → ブラウザ全体のスクロール位置を取得
$(“footer”).innerHeight() → フッターの高さ

上記の意味が理解できればif文の意味もわかると思います。

要はフッターの高さの位置の前後でボタンの配置を「absolute」で行うか「fixed」で行うかを分岐させています。

簡単にいえば

フッターまでは「fixed」
フッターまで来たら「absolute」

で指定する、ということ。

トップへ戻るボタンの指定方法

そして「absolute」の場合は、bottomの位置をフッターの高さにすることでフッターの真上に配置されます。

つまりフッターの手前で止まるということです。

カスタマイズ

ボタンの配置する位置は任意のところにカスタマイズできます。

$(document).ready(function () {
  $("#js-pagetop").hide();
  $(window).on("scroll", function () {
    scrollHeight = $(document).height(); 
    scrollPosition = $(window).height() + $(window).scrollTop(); 
    footHeight = $("footer").innerHeight(); 
    if (scrollHeight - scrollPosition <= footHeight) {
      //下側から（フッターの高さ +　20px上げた位置）に配置
      $("#js-pagetop").css({ position: "absolute", bottom: footHeight + 20 }); 
    } else { 
      //下側から20px上げた位置に配置
  　　 $("#js-pagetop").css({ position: "fixed", bottom: "20px" }); 
    }
  });
});

上の例の場合だと