今回の内容

• ・スムーススクロールさせる

スムーススクロール

とりあえず実装してみますか。

$('a[href^=#]').bind('click',function()
{
 var speed = 400,
     href= $(this).attr("href");
     targetElem = $(href == "#" || href == "" ? 'html' : href);
     position = targetElem.offset().top;
 $('body,html').animate({scrollTop:position}, speed, 'swing');
 return false;
});

ソースの解析

まず、クリックイベントを付与させる要素についてですが
セレクタで判断しており
【aタグでhrefがシャープで始まるもの】
の条件に合致した場合、動作させるようになっています。

処理の内容を簡潔に書くと
１：飛び先のID名を取得する
２：飛び先の要素を指定する。
　　謎な記述方法をしていますが、これはif文の中でも三項演算子と呼ばれる書き方です。
　　言葉に表すと
　　href変数の中身が#または空の場合はhtml文字列を出す
　　そうでない場合は、hrefの中身を出す。
　　つまり
　　href変数の中身が#または空の場合はhtmlタグをターゲットにする。
　　そうでない場合は、hrefの中身(指定されたIDの要素)をターゲットにする
　　の意味合いとなります。
３：指定要素の表示位置(サイト先頭から見て何pxの位置にいるのか)を取得
４：現在の位置から指定位置までアニメーションを使ってスクロールバーを移動させる
５：aタグの遷移をキャンセルする。

補足：aタグにクリックイベントを付ける時は

テキストリンクって基本的にクリックすると、遷移しますよね
JSの場合、それが非常に邪魔になる時があります。
例えば
１：hrefの中身を別ウインドウで表示させたい
２：aタグでクリッカブルなものとしてマークアップしてるけど、遷移も何もせずにJSで何か処理させる

この２パターンが非常に多いです。
ではどんな風に回避するのでしょうか

hrefの中身を別ウインドウで表示させたい

JSの動作とリンク遷移の動作の順番は、
js→リンク遷移、の順番となります。
hrefの中身を別ウインドウにした場合、そのまま書いちゃうと
別ウインドウ表示→元のページも遷移が走ってしまう。
となります。
そこで出てくるのが処理最後の
return false;
こいつを付けることで、【これ以上何も処理しない】となり、リンクの遷移動作も行われる事がなくなります。

aタグだけど遷移も何もせずにJSで何か処理させる

上記のように、return false;をつけるのもよいのですが、もっと楽なのは
href要素に javascript:void(0); と記述することです。
何を意味しているのかと言うと、javascriptのコードを動かしますよ(javascript:)。でも特に何もしない(void(0))
って事です。

外部リンクのスムーススクロール

外部リンクでもスムーススクロールを使えたりします。
つまり、ページ読み込み時にスゥーっと移動してくれるヤツです
上記のクリック処理と併せてこっちも書いておくとよいですよね。
最適化も一緒にしてしまったソースですが以下

var scrollTarget  = location.hash,   // スクロールしたい要素情報
    targetElem    = $(scrollTarget), // 要素情報を参考にエレメントを取得
    dafaultSpeed  = 400,             // デフォルトのスピード
    dafaultEasing = 'swing';         // デフォルトのeasing名

// スクロール位置を一番上にしてからスクロール処理の開始
// スクロール位置をリセットしないと、その場所へ飛んでしまうので。
window.scroll(0,0);
scrollPage(targetElem,dafaultEasing,dafaultSpeed);

//***********************************
// ページ内リンククリックイベント
//***********************************
$('a[href^=#]').bind('click',function()
{
  scrollTarget = $(this).attr("href");
  targetElem   = $(scrollTarget == "#" || scrollTarget == "" ? 'html' : scrollTarget);
  scrollPage(targetElem,dafaultEasing,dafaultSpeed);
  return false;
});

/********************************************
*
* scrollPage
* スムーススクロールさせる。
*
* @pram targetElem スクロール先のエレメント
* @pram easing easingの名前
* @pram speed スクロール移動時間
*
* @return none
*
********************************************/
function scrollPage(targetElem,easing,speed)
{
  // 存在しない要素へのハッシュが指定されている場合はスクロール処理をストップ
  if(targetElem.offset() === undefined) return false;

  var position     = targetElem.offset().top;
  $('body,html').animate({scrollTop:position}, speed, easing);
}

ソースのコメント通りです。
遷移してみれば分かる！外部遷移でのスムーススクロール