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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

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

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

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

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

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

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

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^)

サンプル

以下、今回のサンプルです!

See the Pen
gObJZay
by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

参考 フッター手前で止まるスムーズスクロールRunLand WEB事業部

まとめ

以上、jQueryを使ってフッター手前でピタッと止まるボタンの実装方法をご紹介しました。

コピペで実装できますのでぜひ使ってみてください〜

ボタンコーディング記事まとめ【HTML・CSS・jQuery】ボタンコーディングサンプルコード記事まとめ【HTML・CSS・jQuery】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です