ページトップへ戻るボタンサンプルです。
下へスクロールするとボタンがあります。

$(function () {
    $("#btn_top").click(function () {
    $('html,body').animate({scrollTop: 0}, 'slow', 'swing');
	return false;
    });
});
		    

スクロールすると出現し、フッターの高さで付随をキャンセルするやり方は以下の通り。

$("#pagetop").hide();
    // ↑pagetopを非表示にする

$(window).bind("scroll", function () {
    // トップから120px以上スクロールしたら
    if ($(this).scrollTop() > 100) {
	// ページトップのリンクをフェードインする
	$("#pagetop").fadeIn();
    } else { // それ以外は
	// ページトップのリンクをフェードアウトする
	$("#pagetop").fadeOut();
    }

    // フッター固定する

    scrollHeight = $(document).height();
    // ドキュメントの高さ
    scrollPosition = $(window).height() + $(window).scrollTop();
    // ウィンドウの高さ+スクロールした高さ→ 現在のトップからの位置
    footHeight = $("#footer").innerHeight();
    // フッターの高さ

    if (scrollHeight - scrollPosition <= footHeight - 15) {
	// 現在の下から位置が、フッターの高さの位置にはいったら
	//  ".gotop"のpositionをabsoluteに変更し、フッターの高さの位置にする
	$("#pagetop").css({
	    "position": "absolute",
	    "right": 0,
	    "bottom": footHeight
	});
    } else {
	// それ以外の場合は元のcssスタイルを指定
	$("#pagetop").css({
	    "position": "fixed",
	    "right": 0,
	    "bottom": 15
	});
    }
});
		    
ページトップへ戻る