スムーズなページ内リンク(別ページからも対応):jQuery
最終更新日:
jQueryでページ内リンクをするするーっとスムーズな動きでさせる方法をメモ。
まずはjQueryを使用できるようにするために
<head>~</head>内に
<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
別ページから飛んだ場合もページ内リンクに対応させる場合
別ページからも対応したスムーススクロールするページ内リンクの方法は下記です。
$(function(){ var headerHeight = $('#header').outerHeight(); var urlHash = location.hash; if(urlHash) { $('body,html').stop().scrollTop(0); setTimeout(function(){ var target = $(urlHash); var position = target.offset().top - headerHeight; $('body,html').stop().animate({scrollTop:position}, 500); }, 1000); } $('a[href^="#"]').click(function() { var href= $(this).attr("href"); var target = $(href); var position = target.offset().top - headerHeight; $('body,html').stop().animate({scrollTop:position}, 500); }); });
でOK
setTimeoutの箇所の1000は、
別ページからの場合ページの読み込みが終わるまで動きませんので
何秒後に実行するかです。
headerHeightはヘッダーの高さを取得していますので、ヘッダー固定が無いサイトでしたら不要です。
JavaScriptのおすすめ参考書
ポチップ
ポチップ