はてなブログで瞬時にページトップにジャンプする設定方法

f:id:r246toshi:20191217152631p:plain

はてなブログで記事を下の方まで読み進めた時に最初に戻りたい時がある。
通常操作は右サイドのスクロールバーをドラッグアンドドロップで上に持っていき、ページトップに戻ると思うが少々面倒くさい。
そこで、読者がより操作し易い様に「ページトップに戻る」ボタンの設置方法を紹介する。

記事のフッタの設定手順

１．ダッシュボードからデザインをクリック
２．カスタマイズアイコンをクリック
３．フッタに下記のコードをコピペする
４．「変更を保存する」をクリック

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

※アイコンや大きさの変更をしたい場合は、参考資料に詳しく解説された記事があります。

デザイン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);
}