scrollTo

jQeryを使用して，なめらかにスクロールするページを作成します．
→サンプルページ01

<script src="js/jquery.min.js" type="text/javascript"></script>

使用するためにはまずheadタグ終了の直前でjquery.min.js（jQuery本体）を読み込みます．
上記ではjsフォルダを作成しその中にjquery.min.jsを置いています．（※読み込む場所に注意：js/がこの記述です）

<script type="text/javascript">
	$(document).ready(function(){
		// #で始まるアンカーをクリックした場合に処理
		$('a[href^=#]').click(function(){
			// スクロールの速度
			var speed = 1200; // ミリ秒
			// アンカーの値取得
			var href= $(this).attr("href");
			// 移動先を取得
			var target = $(href == "#" || href == "" ? 'html' : href);
			// 移動先を数値で取得
			var position = target.offset().top;
			// スムーススクロール
			$("html, body").animate({scrollTop:position}, speed, "swing");
			return false;
		});
	});
</script>

直後にさらにscriptタグでスクロールの設定を行っています．上記ではaタグの#で始まるアンカーをクリックした際にそのidをもつ箇所にスムーズにスクロールするという記述です．

<li class="button"><a href="#about">ABOUT</a></li>
<li class="button"><a href="#works">WORKS</a></li>
<li class="button"><a href="#contact">CONTACT</a></li>

ナビゲーション（aタグ）の設定です．hrefに#id名を記述することで，このid名をもつ箇所にジャンプさせます．

<div id="contact">
	<h2>
		CONTACT<br/>
		─
	</h2>
	<div>
		<p>
			〒192-0394<br/>
			東京都八王子市鑓水2-1723<br/>
			TEL: 042-679-5623<br/>
			FAX: 042-679-5646<br/>
			<a href="mailto:gurafu@tamabi.ac.jp">Email: gurafu@tamabi.ac.jp</a><br/>
		</p>
	</div>
</div>

ナビゲーションで指定したid名をもつdiv要素を配置します．「div id=”contct”」これで関連づけが出来，スムーズにスクロールする実装が可能になります．

つづいて応用としてランダムに配置されたDIV要素に斜めに移動するサンプルです．
→サンプルページ02

$(document).ready(function(){
	// #で始まるアンカーをクリックした場合に処理
	$('a[href^=#]').click(function(){
		// スクロールの速度
		var speed = 1200; // ミリ秒
		// アンカーの値取得
		var href= $(this).attr("href");
		// 移動先を取得
		var target = $(href == "#" || href == "" ? 'html' : href);
		// 移動先を数値で取得
		var posTop = target.offset().top;
		var posLeft = target.offset().left-260;
		// スムーススクロール
		$("html, body").animate({scrollTop:posTop, scrollLeft:posLeft}, speed, "swing");
		return false;
	});
});

14行目の$(“html, body”).animateの後の箇所にカンマで区切りscrollLeft:posLeftを追加します．上下スクロールのみでなく，左右のスクロールの移動場所も追加したカタチです．

/*div04*/
#d{
	position:absolute;
	top:4000px;
	left:6000px;
	background-color:#FF0;
	width:1024px;
	height:728px;
}

CSSでdiv要素をランダムに配置します．サンプルではpostionをabsoluteで指定して，top, leftにランダムな数を記述しています．他のdiv要素にもそれぞれに適用してください．width・heightの大きさなども変化させても効果としては良いでしょう．