コピペだけで簡単に、はてなブログに上に戻るボタン(ページトップへ戻るボタン)を設置するコードを改めて書いてみました(今さらですが、一度やってみたかったのです)。
(次のコードをコピーしてデザイン→カスタマイズ→フッタに貼り付けます)
<!-- 上に戻るボタンの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スクロールしたら、ボタンをふわっと表示します。
今まで書いた記事を整理、応用して書き直しました。
参考になるブログ・Webサイト