jQueryで下までスクロールした時にフッターに固定されるボタンを作る方法

Webデザインをしていて、ページトップへのボタンの見せ方が気になることはありませんか？

最近のデスクトップサイトではページトップ戻るボタンを付けているところが減っているように感じますが、スマホサイトではまだまだ見かけます。

今回フッタいい感じにフィットするボタンを作りましたのでご紹介します。

デモ

ページトップに限らず、いろいろなボタンの設置も出来るかと思うので、参考になれば幸いです。

ボタンを右下に表示させる

ボタンを右下に固定で表示させておきます。背景色や文字色はお好みで設定してください。

HTML

<a href="#demo02" class="pagetop">ページトップ</a>

CSS

.pagetop {
  position: fixed;
  right: 30px;
  display: block;
  padding: 20px;
}

ボタンをフェードインで表示させる

スクロール値が120を超えた段階で、ボタンが表示されるようにします。またクリックした時にスムーズに動くように設定します。

$(document).ready(function(){
  // 120を超えたら表示させる
  var topBtn = $('.pagetop');
  topBtn.hide();
  $(window).scroll(function(){
    if($(this).scrollTop() > 120){ //スクロール値
      topBtn.fadeIn();
    }else{
      topBtn.fadeOut();
    }
  });
  // 動きをスムーズに
  topBtn.click(function () {
    $('body,html').animate({
      scrollTop: 0
    },500);
    return false;
  });
});

ボタンをフッタにフィットさせる

jQueryでページ全体の高さ、フッタの高さ、ウィンドウ(ブラウザ)の高さ、スクロール量をそれぞれ取得して、フッタが見えた段階で、bottomの値が、スクロールに合わせて変動するようになっています。DOM構成時に取得するので、CSSなどで高さを固定する必要はありません。

$(function(){
  $(window).scroll(function(e){
    var bottomY = 30, //スクロール時の下からの位置
      $window = $(e.currentTarget),
      height = $window.height(), //ウィンドウ(ブラウザ)の高さ
      scrollTop = $window.scrollTop(), //スクロール量
      documentHeight = $(document).height(), //ページ全体の高さ
      footerHeight = $(".footer").height(); //フッタの高さ
      bottomHeight = footerHeight + height + scrollTop + bottomY - documentHeight;
    if(scrollTop >= documentHeight - height - footerHeight + bottomY){
      $('.pagetop').css({ bottom: bottomHeight - bottomY }); //スクロール時にbottomの値が変動
    }else{
      $('.pagetop').css({ bottom: bottomY });
    }
  });
});

WordPressのjQueryは$（ドル）を使えないので注意してください∠( ﾟдﾟ)／