KH-WEBLOG TOP > WEBメモ > JavaScript > スムーズなページ内リンク:jQuery

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

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パンくずリスト パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事