[jQuery] ページ内リンクの移動に、スクロールのエフェクトをかける方法

ページ内リンクをもう少しそれっぽくしたい

ただページ内リンクをするだけだと、瞬間移動している様で感じが悪い。
ページ内を移動している感を出したい。

実装

html

アンカーポイントにリンクを貼るだけです。
移動させたい先の、id名に#を付けてhref=に指定するだけ。

<a href="#hoge">下へ移動</a>

jQuery

まずはjQueryを呼び出す。

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

次にスクリプトを記載。

$(function(){
    $('a[href^=#]').click(function(){ 
        var speed = 500; //移動完了までの時間(sec)を指定
        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;
    });
});

これだけでなんとか出来ました。

参考