MRKなんでも記録

MRKなんでも記録 〜 好奇心・チャレンジ → synapse 増やそう

MRKなんでも記録

MENU

CSSで「戻るボタン」実装~これは便利 ホントに便利

スポンサーリンク

 f:id:r2okarain:20190712224525p:image

  ブログの一番上に戻るボタン設定 

  設定・・と書いても、全くのコピペだから恥ずかしいばかりだが、備忘録です

 

戻るボタンが無いと、確かに不便

スマホだと指をスライドし、パソコンではコロコロとマウスホイールを動かさないといけない。長い文章だと結構手間がかかる。

 

このサイトを見つけ、さっそく試してみた
ありがとうございました

 

 

①タイトル下に貼る

 

 

②フッターに貼る

<div id="page-top">
  <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
  $(window).scroll(function(){
    var now = $(window).scrollTop();
    if(now > 500){
      $("#page-top").fadeIn("slow");
    }else{
      $("#page-top").fadeOut("slow");
    }
  });
  $("#move-page-top").click(function(){
    $("html,body").animate({scrollTop:0},"slow");
  });
</script>

 

   

③デザインCSSに貼る

/*上に戻る*/
#page-top {
  display:none;
  position:fixed;
  right:10px;
  bottom:20px;
  margin: 0;
  padding: 0;
  text-align:center;
}
#move-page-top{
  color:rgba(0,0,0,0.4);
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:rgba(0,0,0,0.6);
}
@media only screen and (min-width: 400px){
  #page-top{
    right:35%;
    margin-right: -450px;
  }
}

 margin-right: -450px;のマイナスが大きいほど右へボタンが寄るので380に変更。

 

 

作者さん曰く
~ テーマがBrooklynの人はこのまま使えます。他のテーマだと位置がずれるかも~

 

戻るボタン、うん、これは便利