【jQuery】フッター手前で止まるボタンの実装方法

2020/01/30

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、jQueryを使いフッター手前でピタッと止まるボタンの実装方法をご紹介します。

Webサイト制作では、ページ右下に「TOPへ戻る」ボタンやユーザーのお問い合わせを促す「お問い合わせはこちらから！」ボタンを設置することはよくありますよね。

※後者はCTA（Call to Action）などと呼ばれていますね。

そのボタンを「フッター領域までスクロールしたらフッターと重ならないようにフッターの少し手前で止めたい…!!!」という時があります。

10数行のjQueryで簡単実装できますのでぜひ覚えていただければ幸いです(^o^)

それでは見て参りましょう！

jQueryでフッター手前で止まるボタンを実装しよう！
まとめ

jQueryでフッター手前で止まるボタンを実装しよう！

実装のポイント

今回の実装のポイントは、

ボタンやフッターを囲っている親要素にpostion:relative;を指定する
フッター手前までスクロールしたらボタンをfixedからabsoluteに変更する
ボタンを固定する位置は下（bottom）からフッターの高さ分のところ

となります。

jQueryのコードを見てみましょう。

jQuery

script.js

$(window).on("scroll", function() {
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    footerHeight = $(".Footer").innerHeight();
    if ( scrollHeight - scrollPosition  <= footerHeight ) {
      $(".CTA").css({
        "position":"absolute",
        "bottom": footerHeight
      });
    } else {
      $(".CTA").css({
        "position":"fixed",
        "bottom": "0px",
      });
    }
  });

フッター手前以外ではbottom:0で最下部に固定してあげます。

フッター上にピタッとくっつけるのではなく少し余白をあけたい場合は、bottom: footerHeight + 40といった感じで調整してみてください(^o^)