Alt-k
6/18/2019 - 7:54 AM

page topへ戻るボタン

参考URL http://serinaishii.hatenablog.com/entry/2015/11/06/%E8%B6%85%E7%B0%A1%E5%8D%98%26%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7OK%EF%BC%81%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%88%E3%83%83%E3%83%97%E3%81%B8%E6%88%BB%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE

index.html
content_copyfile_download
<p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
（footer手前に記述）
style.css
content_copyfile_download
#pageTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
}

#pageTop a {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  border-radius: 3rem;
  width: 3.5rem;
  height: 3.5rem;
  background-color: #00188b;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
common.css
content_copyfile_download
 //■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;
   });
});