【WordPress】スクロールすると途中から表示される「トップへ戻るボタンやサイドボタンへの応用」【JavaScript】

CSSを書く

section{
  height: 1000px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  padding: 100px 50px;
}

.button{
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 50px;
  color: #fff;
  background: #000;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示に*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示*/
.active{
  opacity: 1;
  visibility: visible;
}

 

JSを書く（footer.php）

$(function() {
  // 変数にクラスを入れる
  var btn = $('.button');
  
  //スクロールでページトップから100に達したらボタン表示
  $(window).on('load scroll', function(){
    if($(this).scrollTop() > 100) {
      btn.addClass('active');
    }else{
      btn.removeClass('active');
    }
  });

  //スクロールでトップへ戻る
  btn.on('click',function () {
    $('body,html').animate({
      scrollTop: 0
    });
  });
});