コピペだけで簡単に、はてなブログに上に戻るボタン（ページトップへ戻るボタン）を設置するコードを改めて書いてみました（今さらですが、一度やってみたかったのです）。
（次のコードをすべてコピーして「デザイン→カスタマイズ→フッタ」に貼り付けます）
<!-- 上に戻るボタンの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: 28px;
bottom: 50px;
display: none;
}
/* 上に戻るボタンの見た目 */
#move-page-top {
font-size: 35px; /* アイコンの大きさ */
color: #ccc; /* アイコンの色 */
cursor: pointer;
transition: 0.3s;
text-decoration: none;
display: block;
width: 45px; /* アイコンの背景の幅 */
height: 45px; /* アイコンの背景の高さ */
border: 7px solid #ccc; /* アイコンの背景の丸囲み線 */
border-radius: 50%; /* アイコンの背景の丸さ */
background: transparent; /* アイコンの背景の色 */
line-height: 51px; /* アイコンの位置 */
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() > 200) {
if (!visible) {
element.fadeIn('slow');
}
}
else {
element.fadeOut('slow');
}
timeOut = null;
}, 500);
}
});
/* 上に戻るボタンの動作（クリック） */
$('#move-page-top').click(function () {
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
「上に戻るボタンのHTML」（<div id="page-top">～</div>で囲まれた部分）でボタンを表示します。ボタンにははてなのアイコンフォントを使っています。
「上に戻るボタンのCSS」（<style>～</style>で囲まれた部分）でボタンの位置や見た目を調整します。
※ フッタではなくデザインCSS（デザイン→カスタマイズ→デザインCSS）に貼り付ける場合は<style>と</style>の記述は不要です。
「上に戻るボタンのJavaScript」（<script>～</script>で囲まれた部分）でボタンの動作を設定します。下に200pxスクロールしたら、ボタンをふわっと表示します。
今まで書いた記事を整理、応用して書きなおしました。
スクロールすると右下にスーっと出てくるページトップへの移動ボタン。あれってとても便利ですよね。今回はこの「TOPへ戻るボタンの作成方法」を、JavaScript初心者でも理解できるように解説します。
Wayback Machine（Syncer）－ 追記 －
このブログでは、はてなのアイコンフォントを使って「上に戻るボタン」を設置していましたが、少し飽きてしまったのと、コードをシンプルにしたかったので、画像でボタンを設置することにしました。
simadzu’blog