【はてなブログ】「トップへ戻る」ボタンをつけてみた


最近、ちょっとずつブログカスタマイズにハマってきました。記事のカテゴリー整理などはまだまだですが、本のレビューなどを書くようになると、記事全体が長くなり、トップに戻るのが面倒になることが顕在化してきました。そこで、かっこいいブログによくある「トップにもどる」的なボタンの導入を試みました。結果としては、こんな感じ。



参考はこの辺の方々から。
nohack-nolife.hatenablog.com


アイコン使うならこちらから
azanaerunawano5to4.hatenablog.com

アイコンについては、以前の記事で使い方がわかりました。
demacassette2.hateblo.jp

実際に変更したところ

実際に設定を変更したところは以下の通りです。

記事のフッタ部分

ダッシュボード→デザイン→カスタマイズ→フッタ

//トップに戻るボタンの設定
<div id="page-top">    
 <a id="move-page-top"><i class="fa fa-arrow-circle-o-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>

これをコード書く部分にコピペ

トップにもどるボタンは、を使っています。

<i class="fa fa-arrow-circle-o-up fa-5x"></i>

大きさは、数値を変えると変えられます。
fa-4x  fa-3x  fa-2x  fa-1x
      

はてなブログで用意されているアイコンを使うのもありです。

<i class="blogicon-chevron-up fa-3x"></i>

詳しくはこちら
wedges.hatenablog.com


デザインCSS部分への追加内容

ダッシュボード→デザイン→カスタマイズ→デザイン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.6);
  text-decoration:none;
  display:block;
  cursor:pointer;
}

/* ページトップへ戻るボタン:ホバー時 */
#move-page-top:hover{
  color:rgba(0,0,0,0.8);
}

これをコピペ


以上で、記事の下の方まで行ったら、上に戻るボタンが出てきて、クリックするとにゅるっとトップに戻ります。