スムーズなページ内リンク: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