一定スクロールでフェードインする上に戻るボタン

2016/09/13

一定スクロールでフェードインする上に戻るボタン

このブログでも使用しています。
作動させるにはjQueryが必要です。

HTML

  <div class="scroll_top">
      <div class="scropp_top_inner">
          <a href="#">
              <img src="<?php echo get_template_directory_uri(); ?>/img/common/icon_scroll.png" alt="">
          </a>
      </div>
  </div>

CSS

.scroll_top{
    position: fixed;
    right: 40px;
    bottom: 60px;
    z-index: 10;
}
.scropp_top_inner{
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    -webkit-transition: .3s;
    transition: .3s;
}
.scropp_top_inner:hover{
    background: rgba(0, 0, 0, 0.8);
    -webkit-transition: .3s;
    transition: .3s;
}

Js(jQuery使用)

$(function() {
    //.scroll_topを変数[topBtn]に入れる
  var topBtn = $('.scroll_top');
  //topBtnはhide()にして見えないようにする
  topBtn.hide();
  $(window).scroll(function () {
      //200pxスクロールしたらtopBtnをフェードイン表示させる
      if ($(this).scrollTop() > 200) {
          topBtn.fadeIn();
      } else {
          //もし上にスクロールして200px未満になったらフェードアウトさせる
          topBtn.fadeOut();
      }
  });

//topBtnをクリックしたらトップへスクロールする
  topBtn.click(function () {
      $('body,html').animate({
          scrollTop: 0
      }, 500);
      return false;
  });
});