easing

easingはjQueryにさまざまなアニメーション効果をつけるためのプラグインです．
→サンプルページ

このサンプルでは，左のナビゲーションをクリックすると，ABOUT, WORKS, CONTACTと移動しますが，その際のアニメーションの効果にeasingのエフェクトを使用しています．いちど多めに移動し戻るような動作をしています．

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

使用する際はheadタグの終了直前でscriptタグを使用して記述します．まず1行目で[jquery.min.js]（jQuery）を読み込みその後に[jquery.easing.1.3.jp]を読み込み使用する準備が完了します．

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

つづいてのscriptタグの記述はaタグでid指定している箇所にスクロールアニメーションを行うための記述です．
16行目の末尾”easeOutBack”がeasingの処理になります．この部分に”イージングの処理”を記述して効果を変更していきます．

例:（効果をeaseOutBackからeaseInOutQuadに変更）

$("html, body").animate({scrollTop:position}, speed, "easeOutBack");

↓

$("html, body").animate({scrollTop:position}, speed, "easeInOutQuad");

easingの指定と効果は以下のページで確認してください．
参考ページ：http://semooh.jp/jquery/cont/doc/easing/