はてなブログで位置固定のページトップボタンを設置する

　ページスクロールに関係なく位置が固定された「ページトップへ戻る」ボタン。

　このネタもぜひ実装したかったんですよね。

　普通だと、最後までスクロールしてやっと「ページトップへ戻る」ボタンがあるじゃないですか。でも、そこに行くまでにトップへ戻りたい場合って意外と多いから、この機能ってなんで標準装備じゃないんだろうっていつも思う（まぁ、ブラウザによって挙動が違ったりするかもしれないので難しいのだろうけど）

　実はこれもtmd45さんのサイトからいただいたネタなんですが、ただこちらは自分がtmd45さんのブログページソースを見させてもらって勝手に拝借（つまりパクった）ので、もしまずかったらごめんなさい。

　改めて紹介しますが、元ネタは

「はてなブログ id:tmd45」さんの
~~はてなブログサイドバーのカテゴリ表示をタグクラウドにする！ - TMD45INC!!!~~

＃13/5/26追記：上記記事が改良（よりわかりやすく）されました。タグクラウド化に興味のある方はこちらへ
　　【改訂版】はてなブログサイドバーのカテゴリ表示をタグクラウドにする！ - TMD45INC!!!

　です。

　それでは本題です。

HTMLモジュールの配置

　まず設定箇所ははてなブログのカテゴリ記事数によって、カテゴリ文字の大きさを変化させるで紹介したとおり、サイドバーのhtmlモジュールとして配置してください。

<p id="page-top"><b><a href="#PAGETOP">↑ページトップへ</a></b></p>

<script>
// ページトップへ移動ボタンの表示
$(function() {
	var topBtn = $('#page-top');
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});
</script>

補足

　もし、前回紹介した「カテゴリ名の大きさを変える」HTMLモジュールと共存させたい場合、サイドバーにそれぞれのHTMLモジュール配置してもいいですけど、上記スクリプトにマージしちゃう手もあります。

　その場合は、前回のスクリプトの

　最初の1行 script 行と、最後の1行 /script 行の2行を削除して、

　上記スクリプトの最後の行 /script 行の前にコピペしてください。

CSSの設定

　次は「デザインCSS」の設定で、CSS定義のどこでもいいんですが以下をコピペしてください。

　くれぐれも他のCSS定義は消さないようにね！

/* ページトップへ移動 */
#page-top {
    position: fixed;
    bottom: 30px; right: 0; }
	#page-top a {
		background: rgba(153,204,255,.6);
		text-decoration: none;
		color: #fff;
		padding: 15px 30px 15px 15px;
        	border-radius: 10px; }
	#page-top a:hover {
		background: rgb(0,153,255);
            	border-radius: 10px; }

　ちなみにオリジナルと違って、ボタンの色は自分の好みで青系に変えてます。

　ボタンの色を変えたい場合はCSSを教えているホームページを見たりしてbackground文の値を変更してください。