ページの最下部につける「このページのトップへ戻る」

だいたい、要望としては
　1. 戻るときはスル～っと動いてほしい
　2. 下にスクロールしたらフワッと現れてほしい
　3. 画像は使わずCSSだけでカッコ良くしたい
といったところでしょう。

というわけで、万能ソースを用意。

【HTML】

<p id="pagetop"><a href="#">▲<br>PAGE TOP</a></p>

これだけ。

【CSS】

#pagetop {
    position: fixed;
    bottom: 30px;
    right: 15px;
    font-size: 10pt;
}
#pagetop a {
    color: #fff;
    width: 80px;
    padding: 18px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    text-decoration: none;
    background: #666;
}
#pagetop a:hover {
    text-decoration: none;
    background: #999;
}

これだけ。

【JavaScript】

$(function() {
	var topBtn = $('#pagetop');	
	topBtn.hide();
	//ここまで下がったらボタン表示
	$(window).scroll(function () {
		if ($(this).scrollTop() > 300) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
	topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 1000);
		return false;
	});
});

これで「.js」保存して＜head＞にリンクはるだけ。

外部ファイルにせずHTMLに記述するときは

<script type="text/javascript">
</script>

の間に記述して、HTMLのソースの直下にでも貼っておけばOK。

まあ、あと、JSは、外部内部問わず、jQueryを呼び出す

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

みたいなのが前にないと動かないことがあるから、面倒くさいんだよね。