【jQuery】スクロールすると出てきて追従するボタンetcの作り方　フッター手前で止まる

よくお問い合わせページへの誘導等で見る、最初は出てこないけどスクロールすると横から出てきて付いてくるアレの作り方です。フッター手前で止まる設定も。

HTMLは割愛します。追従させたいタグにクラスもしくはID名を付けてください。デモではクラス名（.ebi）としています。

body {
    position: absolute;
}

.ebi {
    width: 150px;
    position: fixed;
    bottom: 24px;
    right: -200px;
    z-index: 100;
}

↑最初は隠れているため、位置をマイナスで設定しています。

↓JSはこちら

//スクロールすると横から出てくる処理
$(function() {
    var appear = false;
    var ebi = $('.ebi');
    $(window).scroll(function () {
      if ($(this).scrollTop() > 200) {  //200pxスクロールしたら
        if (appear == false) {
          appear = true;
          ebi.stop().animate({
            'right': '16px' //右から16pxの位置に
          }, 300); //0.3秒かけて現れる
        }
      } else {
        if (appear) {
          appear = false;
          ebi.stop().animate({
            'right': '-200px' //右から-200pxの位置に
          }, 300); //0.3秒かけて隠れる
        }
      }

    //以下フッター手前で止まる処理
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    footHeight = $('footer').innerHeight();
   
    if ( scrollHeight - scrollPosition  <= footHeight ) {
        ebi.css({     //cssを書き換える
            'position':'absolute',
            'bottom':footHeight,
        });
    } else {
        ebi.css({     //スクロールして上に戻った場合は元に戻る
          'position':'fixed',
          'bottom':'24px',
        });
        }
    });
});

↑位置や秒数は適宜設定してください。

あるあるですが、jQueryの本家本元を読み込ませておかないと動かないので注意してください。

WordPressの場合は、上記JSファイル内の「＄」を「 jQuery 」に置き換えてくださいね。じゃないと動きません。