それじゃ早速設置してみようかなぁって思ったんですけど、Bloggerってテキストファイルのアップロードができないんじゃない？ってことに気がついてしまったわけで…。じゃあ直接書くしかないじゃんってわけです。
とりあえず最初にリンク用の画像を用意します（別に普通のテキストリンクでも動きます）。まぁこれは適当に作成します。
次に<body>タグの適当な場所に<a>タグと<image>タグを置きます。まぁ<body>タグの最後辺りが無難ではないでしょうか？
<div id='pagetop'>
<a href='#header'>
<img alt='pagetop' src='画像リンク先'/>
</a>
</div>
次はCSSです。見ての通り対象idにfixed属性を付けて右下に固定しています。<a>タグに対してはテキストリンクにしている場合はもうちょっと工夫した方がいいかもしれません。
#pagetop {
position: fixed;
bottom: 5px;
right: 5px;
}
#pagetop a
{
width: 50px;
height: 100px;
display: block;
text-decoration: none;
}
最後にスクリプトを書きます。対象idを非表示化→スクロール幅判定→対象idフェードイン→（クリックで）ページトップへアニメーションって感じです。スクロール幅の判定とアニメーションスピードの数値は任意で変更できます。自分は大体ヘッダーが見えなくなったくらいで表示するように調整してます。
<script type='text/javascript'>
$(document).ready(function () {
$('#pagetop').hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#pagetop').fadeIn();
} else {
$('#pagetop').fadeOut();
}
});
$('#pagetop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>
以上です。実際の動作はこのブログ上で確かめてみて下さいってことで、たまにはjqueryを載せてみたの巻でした。
参考にさせていただいたサイト：「スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール）」「jQueryでスクロールすると表示する系いろいろ」
