スムーズなページ内リンク：jQuery | KH-WEBLOG

スムーズなページ内リンク：jQuery

jQueryでページ内リンクをするするーっとスムーズな動きでさせる方法をメモ。

まずはjQueryを使用できるようにするために
＜head＞～＜/heade＞内に

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

か直接もっているjquery.js等のファイルを読み込む記述を書きます。

あとは適当にpagelink.js等の名前のjavascriptのファイルを作成し、その中に

$(function(){
    $('a[href^=#]').click(function() {
        var speed = 300;//スピード(値が小さいほど早い)
        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;
    });
});

のように記述して、同じように＜head＞内にpagelink.jsファイルを

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

のように読み込んであげればOK

あとは普通のページ内リンクと同様に

<a href="#top">ページの先頭へ</a>

等のページ内リンクのアンカーを使えばOK