「ページトップへ戻る」ボタンを設置する

hatenaロゴ

「ページトップへ戻る」ボタンは、jQueryの下に設置しないと動作しないので、はてなブログのページの下に自動的に組み込まれるjQueryを強制的に先に読み込ませます。

(デザイン→カスタマイズ→フッタにコードを入力)

JavaScript
<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

「ページトップへ戻る」ボタンのアイコンをHTMLのみを使用して表示します。

(デザイン→カスタマイズ→フッタにコードを入力)

HTML
<div id="page-top">
    <a id="move-page-top"><i class="fa fa-arrow-circle-o-up fa-5x"></i></a>
</div>

※ このブログのデザインテーマは、WebアイコンフォントのFont AwesomeのCSS(font-awesome.min.css)をインポートしているので問題ないのですが、Font Awesomeが読み込まれないとアイコンは表示されません。

(設定→詳細設定→「<head>要素にメタデータを追加」にコードを入力)

CSS
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

「ページトップへ戻る」ボタンのスクリプト本体を設置します。

(デザイン→カスタマイズ→フッタにコードを入力)

JavaScript
<script>
var $w = $(window), $pageTopArea = $('#page-top'), isShow = false;
setInterval(function() {
    if ($w.scrollTop() > 500) {
        if (!isShow) {
            isShow = true;
            $pageTopArea.fadeIn();
        }
    } else {
        if (isShow) {
            isShow = false;
            $pageTopArea.fadeOut();
        }
    }
}, 1000 / 30);
$('#move-page-top').click(function() {
    $('html, body').animate({scrollTop:0}, 'slow');
});
</script>

「ページトップへ戻る」ボタンの表示位置や色をCSSで指定します。

(デザイン→カスタマイズ→「デザインCSS」にコードを入力)

CSS
/* ページトップへ戻る */
#page-top {
    display: none;
    position: fixed;
    right: 20px;
    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);
}

- 追記 -
コピペで簡単!はてなブログに上に戻るボタンを設置する