コピペだけで簡単に、はてなブログに上に戻るボタン（ページトップへ戻るボタン）を設置するコードを改めて書いてみました（今さらですが、一度やってみたかったのです）。
（次のコードをコピーしてデザイン→カスタマイズ→フッタに貼り付けます）
<!-- 上に戻るボタンのHTML -->
<div id="page-top">
<a id="move-page-top"><i class="blogicon-chevron-up"></i></a>
</div>
<!-- 上に戻るボタンのCSS -->
<style>
/* 上に戻るボタンの位置 */
#page-top {
position: fixed;
right: 21px;
bottom: 50px;
display: none;
}
/* 上に戻るボタンの見た目 */
#move-page-top {
font-size:38px; /* アイコンの大きさ */
color: #ddd; /* アイコンの色 */
cursor: pointer;
transition: 0.4s;
text-decoration: none;
display: block;
width: 55px; /* アイコンの背景の幅 */
height: 55px; /* アイコンの背景の高さ */
border: 9px solid #ddd; /* アイコンの背景の丸囲み線 */
border-radius: 50%; /* アイコンの背景の丸さ */
background: transparent; /* アイコンの背景の色 */
line-height: 60px; /* アイコンの位置 */
text-align: center;
}
/* 上に戻るボタンの見た目（マウスオーバー） */
#move-page-top:hover {
color: #000; /* アイコンの色 */
border-color: #000; /* アイコンの背景の丸囲み線の色 */
}
</style>
<!-- 上に戻るボタンのJavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
/* 上に戻るボタンの動作設定 */
var timeOut = null;
$(window).scroll(function () {
if (timeOut == null) {
timeOut = setTimeout(function () {
var element = $('#page-top');
var visible = element.is(':visible');
if ($(this).scrollTop() > 500) {
if (!visible) {
element.fadeIn('slow');
}
} else {
element.fadeOut('slow');
}
timeOut = null;
}, 500);
}
});
/* 上に戻るボタンの動作（クリック） */
$('#move-page-top').click(function () {
$('body, html').animate({scrollTop: 0}, 'slow');
});
});
</script>
上に戻るボタンのHTML（<div id="page-top">～</div>で囲まれた部分）で、ボタンを表示します。はてな純正のアイコンフォント（Webフォント）を使っています。
上に戻るボタンのCSS（<style>～</style>で囲まれた部分）で、ボタンの位置や見た目を調整します。フッタではなくデザインCSS（デザイン→カスタマイズ→デザインCSS）に貼り付ける場合は、<style>と</style>の記述は不要です。
上に戻るボタンのJavaScript（<script>～</script>で囲まれた部分）で、ボタンの動作を設定します。下に500pxスクロールしたら、ボタンをふわっと表示します。
今まで書いた記事を整理、応用して書き直しました。
「ページトップへ戻る」ボタンを設置する
【最終版】「ページトップへ戻る」ボタンの設置
はてなブログの引用デザインをはてな純正アイコンでカスタマイズ