「ページトップへ戻る」ボタンは、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);
}