スムーズなページ内リンク(別ページからも対応)：jQuery

2012-11-24 JavaScript

最終更新日：2022-10-28

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はヘッダーの高さを取得していますので、ヘッダー固定が無いサイトでしたら不要です。