[作って学ぶ！jQuery] 第4回ページスクロールを作って学ぶ

作って学ぶ！jQuery

2010.04.28

イメージ

ページ内リンクを選択したときにアニメーションしながらスクロールする機能をスムーズスクロールというみたいです。スムーズスクロールの例がjQuery でページスクロール - daily dayflowerで紹介されていましたので、そちらを参考にして、ページ内リンクに対応したものを紹介いたします。

デモ

スムーズスクロールサンプル

ページの最後に、TOPと中間地点へのページ内リンクを設置しました。

ソースコード

$(document).ready(function(){
    $('a[href^=#]').click(function(){
        var target;
        target = $( $(this).attr('href') );
        if (target.length == 0) {
            return;
        }
        $('html, body').animate({scrollTop: target.offset().top});
        return false;
    });
});

ブラウザのデフォルトの動作であれば、ページ内リンクを選択するとすぐ切り替わりますが、このスクリプトを実行すれば、スルスルとスクロールしながら、リンク先を表示するようになります。

それぞれの行に解説を加えます。

$(document).ready(function(){
    // href属性が # で始まるa要素だけ、振る舞いを変える
    $('a[href^=#]').click(function(){
        var target;
        // href 属性が、そのままセレクタで使える
        target = $( $(this).attr('href') );
        // ターゲットがない場合はなにもしない
        if (target.length == 0) {
            return;
        }
        // リンク先の画面上の位置を取得して、そこまでスクロール
        $('html, body').animate({scrollTop: target.offset().top});
        // ブラウザのデフォルトの振る舞いを回避
        return false;
    });
});

実装について

書いたあとでこのコードを見ると、いくつか問題点があることがわかります。

ページ内リンクが # で始まるとは限らない。その場合、href属性がそのままセレクタで使えない
アンカーの終点がidではなくname属性で定義されてたときに対応していない

記事冒頭でご紹介したブログからさらに紹介されているAnimated Scrolling with jQuery 1.2 » Learning jQuery - Tips, Techniques, Tutorialsでは、その問題が解決されているようです。実際にスムーズスクロールを実装してみてからコードを読むと、理解しやすいと思います。