スムーズスクロール

HTML

Source Code:

1	<a href="#bottom">下へスムース！</a>

なにも工夫しなくて良いです。
ただ＃をつけてアンカーポイントへリンクを貼るだけです。

Javascript

jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。

Source Code:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

その後に以下のスクリプトを書きます。

Source Code:

01 02 03 04 05 06 07 08 09 10 11 12

<script type="text/javascript"> $(function(){     $('a[href^=#]').click(function() {         var speed = 500;         var href= $(this).attr("href");         var target = $(href == "#" || href == "" ? 'html' : href);         var position = target.offset().top;         $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');         return false;     }); }); </script>

これで、ページ内リンクであれば勝手にスムーススクロール処理をしてくれます。