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

f:id:r2okarain:20190712224525p:image

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

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

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

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

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

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

「一番上に戻るボタン」付けてないブログ、やり方教えてやるから今すぐ付けろ。読みにくいんだよ【はてなカスタマイズ】 - Travel Banana

①タイトル下に貼る

②フッターに貼る

<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;
}
}