jQuery スクロールでふわっと出てきてフッターで止まる追従ボタン

「トップへ戻る」ボタンなど、ページ開いたときは出てないけど、ちょっとスクロールすると出てきてスクロールとともに追従し、フッター手前とかでピタッと止まる、そんなボタン。

割とよく実装する割に面倒なので、すぐ使えるようメモ。

実装

$(function () {
  var topBtn = $('#goTop'); // ボタンを指定
  topBtn.hide(); //最初は隠しておく。CSSで隠してもオッケー

  $(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) { // 100px以上スクロールしたら出てくる
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }

    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    footHeight = $("#footer").innerHeight(); // ここでフッターの高さを取得
    if ( scrollHeight - scrollPosition  <= footHeight ) { // フッター付近まで来たら
      topBtn.css({
        "position":"absolute",
        "bottom": footHeight + 65 // フッターの65px上で止まる
      });
    } else { // それ以外は画面下から20pxの位置に固定
      topBtn.css({
      "position":"fixed",
      "bottom": "20px"
    });
    }

  });
});

$(function () {

var topBtn = $('#goTop'); // ボタンを指定

topBtn.hide(); //最初は隠しておく。CSSで隠してもオッケー

$(window).on("scroll", function () {

if ($(this).scrollTop() > 100) { // 100px以上スクロールしたら出てくる

topBtn.fadeIn();

} else {

topBtn.fadeOut();

}

scrollHeight = $(document).height();

scrollPosition = $(window).height() + $(window).scrollTop();

footHeight = $("#footer").innerHeight(); // ここでフッターの高さを取得

if ( scrollHeight - scrollPosition <= footHeight ) { // フッター付近まで来たら

topBtn.css({

"position":"absolute",

"bottom": footHeight + 65 // フッターの65px上で止まる

});

} else { // それ以外は画面下から20pxの位置に固定

topBtn.css({

"position":"fixed",

"bottom": "20px"

});

}

});

#goTopは#footerの中に入れておき、#footerはposition:relative;にしておく。

例↓

<footer id="footer" class="footer">
  <div id="goTop" class="goTop"><a href="#header">トップへ戻る</a></div>
</footer>

<div id="goTop" class="goTop"><a href="#header">トップへ戻る</a></div>

</footer>

現場からは以上です。