https://rednote.hatenablog.jp/entry/HatenaCustom

はてなブログに上に戻るボタンを設置しました。これはブログテーマsharpnightを利用している一般ユーザー向けの情報です。

参考サイト

http://nohack-nolife.hatenablog.com/entry/2014/11/28/150712nohack-nolife.hatenablog.com
www.colordic.org
demacassette2.hateblo.jp
fontawesome.com

ブログテーマsharpnightでは上記サイトの案内通り設置しても正しく動作しなかったため、コードを少しづつ変えて正しく動作するまでテストしながら設置しました。

記載場所とコード

下記中見出しのタイトルに該当する2箇所へ元のコードをバックアップ後にコードを追記するカタチでコピペし保存してください。

デザイン>フッタ>HTMLを記述できます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が500を超えた場合
       if ($(this).scrollTop() > 500) {
           $('#pagetop').fadeIn("slow");
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut("slow");
       }
   });

   // ページトップクリック
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       },"slow");
       return false;
   });
})(jQuery);
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>

デザイン> デザインCSS

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#dcdcdc;
    text-align:center;
    
}

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

以上。