【jQuery】少し下にスクロールしたら、TOPへボタンを表示する

仕事

こちらも毎回検索して実装しているので、覚書としてメモします。

よくWebサイトでキービジュアルをスクロールして少し抜けたくらいのところで、
「TOPへ」ボタンを表示させたいことがあります。
その実装

//html
<div class=”totop”>
<a href=”#”>
<img src=”” alt=”TOPへ”>
</a>
</div>




//css

.totop{
position: fixed;
bottom: 30px;
right: 30px;
z-index: 100;
opacity: 0;
transition: all 0.3s;
}

.totop.show{
  opacity: 1;
}


//JavaScript
  var topBtn = jQuery('.totop');
  // topBtn.hide();
  //スクロールが900に達したらボタン表示
  jQuery(window).scroll(function() {
    if (jQuery(window).scrollTop() > 900) {
      topBtn.addClass("show");
    } else {
      topBtn.removeClass("show");
    }
  });
})

コメント

タイトルとURLをコピーしました