Memorandum
BookJavaScript / jQueryscroll-to-top

ページの上部に戻る処理を、ちょっとおしゃれにする方法をメモる。このサイトの右下に出てくる「Back to Top」も、この方法で実装しています。

html – head内

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="http://___._____.___/js/jquery.easing-1.3.pack.js"></script>

まず、headにjQueryを読み込みます。今回はアニメーションにイージングプラグインを使いたいので、別にjQuery Easing Plugin (version 1.3)よりダウンロードしたファイルも読み込みます。
イージングの動きのタイプ：
・ jQuery easing ：日本語リファレンス
・ ActionScriptのライブラリ「Tweener」のものですが、動きだけ見るならおすすめ。

html

<div id="back-top">
	<a href="#top">Back to Top</a>
</div> <!-- /#back-top -->

css

#back-top {
	position: fixed;
	bottom: 101px;
	overflow: hidden;
	float: left;
	margin-left: 882px;
	z-index: 1000;
}
#back-top a {
	width: 100px;
	height: 25px;
	display: block;
	font-size: 12px;
	line-height: 25px;
	position: relative;
	margin-bottom: 7px;
}

jQuery

$(document).ready(function(){

	$("#back-top").hide();

	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 200) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
				},
				400,
				"easeInOutQuart");
			return false;
		});
	});

});

• $(document).ready()
  htmlの準備が整ったら実行でしたね。
• $(“#back-top”).hide();
  idがback-topの要素を非表示にする。
• $(window).scroll()
  ウィンドウがスクロールされたときに実行。
• if ($(this).scrollTop() > 200){ $(‘#back-top’).fadeIn(); }
  scrollTop() でスクロール位置を取得し、ページが200pxより下がったら、fadeIn()で表示。そうでない場合は、fadeOutで非表示にする。
• $(‘#back-top a’).click()
  要素がクリックされたときに実行。
• $(‘body,html’).animate({scrollTop:0},400,”easeInOutQuart”);
  bodyとhtmlにアニメーションを実行します。スクロール位置を0に移動。移動時間は400ミリ秒。イージングタイプは”easeInOutQuart”。

Sample

今回はトップ位置に移動するだけですが、コードをいじっていけばアンカーに移動することもできそうですね。