はてなブログに「トップページに戻る」ボタンをほぼコピペだけで表示させる方法

　数年前程からブログなどの右下辺りで、よくよく目にするようになった「トップページに戻る」ボタンを設置することにした。トップページに戻るだと誤解されると思うのだけど、簡単に言うとそのページの最上部にボタン1つで戻れる機能だ。

 「トップページに戻る」ボタンの表示のさせ方

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

　先ずこのコードを設定の詳細設定にある『headに要素を追加』にコピペ。

　次に、デザインのカスタマイズにある『フッタ』の欄に下記のコードをコピペ。

<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:50%;
margin-right: -450px;
}
}

　後、位置調整が必要な場合は「right:50%」の箇所の数値を変更すれば、ボタンの位置を左右に動かせるので微調整すれば良いかと思う。