css 页面顶部へ戻るボタン

Posted 2021-05-13

<p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
（footer手前に記述）

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#pageTop i {
  padding-top: 6px
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #9FD6D2;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

//■page topへ戻るボタン

$(function(){
var topBtn=$('#pageTop');
topBtn.hide();

 

//◇ボタンの表示設定
$(window).scroll(function(){
  if($(this).scrollTop()>80){

    //---- 画面を80pxスクロールしたら、ボタンを表示する
    topBtn.fadeIn();

  }else{

    //---- 画面が80pxより上なら、ボタンを表示しない
    topBtn.fadeOut();

  } 
});

 

// ◇ボタンをクリックしたら、スクロールして上に戻る
topBtn.click(function(){
  $('body,html').animate({
  scrollTop: 0},500);
  return false;

});


});