ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。

ボタンは下の方にこんな感じで配置します。

html

		<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
		

fixedにすると固定配置されます。

css

		#page-top {
			position: fixed;
			bottom: 20px;
			right: 20px;
			font-size: 77%;
		}
		#page-top a {
			background: #666;
			text-decoration: none;
			color: #fff;
			width: 100px;
			padding: 30px 0;
			text-align: center;
			display: block;
			border-radius: 5px;
		}
		#page-top a:hover {
			text-decoration: none;
			background: #999;
		}
		

「100」というのが出現位置になるので適当に変更してください。

javascript

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

スライドアニメーションして表示

先ほどの「トップへ戻るボタン」を下からにょきっとアニメーションして表示したらかっこいいかもしれない。

javascript

		$(function() {
			var showFlug = false;
			var topBtn = $('#page-top');	
			topBtn.css('bottom', '-100px');
			var showFlug = false;
			//スクロールが100に達したらボタン表示
			$(window).scroll(function () {
				if ($(this).scrollTop() > 100) {
					if (showFlug == false) {
						showFlug = true;
						topBtn.stop().animate({'bottom' : '20px'}, 200); 
					}
				} else {
					if (showFlug) {
						showFlug = false;
						topBtn.stop().animate({'bottom' : '-100px'}, 200); 
					}
				}
			});
			//スクロールしてトップ
		    topBtn.click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 500);
				return false;
		    });
		});
		

4、10、15行目の数値はボタンの配置場所によって変更してください。

ホームページを作る人のネタ帳さんのエントリーページは一番下までスクロールすると横から人気記事一覧が表示されてびっくりしますね。
それっぽいことをしてみます。

html

		<div id="footer">
			<div id="slide">
			<div id="slide-in">
				<h3>Footer</h3>
				<p>フッターコンテンツ</p>
				<p id="close"><a>閉じる</a></p>
			</div>
			</div>
		</div>
		

css

		#footer {
			overflow: hidden;
			position: fixed;
			width: 100%;
			bottom: 0;
		}
		#slide {
			background: #555;
			color: #fff;
			width: 100%;
		}
		#slide-in {
			padding: 20px;
		}
		#footer a {
			color: #fff;
			text-decoration: none;
			cursor: pointer;
		}
		

javascript

		$(function() {
			var winWidth = $('body').outerWidth(true);
			var footer = $('#footer');
			var slide = $('#slide');
			//画面下位置を取得
			var bottomPos = $(document).height() - $(window).height() -500;
			var showFlug = false;
			//slideを画面右外へ配置
			$('#slide').css('margin-left', winWidth+'px');
			$(window).scroll(function () {
				if ($(this).scrollTop() >= bottomPos) {
					if (showFlug == false) {
						showFlug = true;
						slide.stop().animate({'marginLeft' : '0px'}, 200); 
					}
				} else {
					if (showFlug) {
						showFlug = false;
						slide.stop().animate({'marginLeft' : winWidth+'px'}, 200); 
					}
				}
			});
			//閉じるボタン
			$('#close').click(function(){
				footer.hide();
			});
			//ウィンドウリサイズしたらwidth変更
			$(window).resize(function(){
				winWidth = $('body').outerWidth(true);
				bottomPos = $(document).height() - $(window).height() - 500;
			});
		});
		

表示位置ですが、scrollTopはウィンドウ上部の位置なので「$(document).height() 」（ドキュメントの高さ）だけだと足りませんね。
「$(document).height() – $(window).height()」（ドキュメントの高さ – ウィンドウの高さ）画面下ぴったりの位置で表示することができます。
ここでは画面下よりちょっと上で表示したかったので「-500」しています。