jQueryでプラグインを使わずにページ内スムーズスクロール

2012.10.12

日に日にjQueryの重要性は高まっています。一方で、星の数ほどのプラグインはもはや多すぎて訳がわからなくなっているのも事実ですｗ

プラグインを使わずに済むようなものはなるべく直書きするようになっています。
今回は、jQueryでプラグインを使わずにページ内スクロール方法をメモしておきます。

コード

aタグに指定した#付きのアンカーリンクをクリックすると、対応したidの場所へスムーズにスクロールします。body閉じタグの近くにコピペすれば動きます。

//ページ内スクロール
$(function(){
    $(a[href^=#]).on('click', function(){
        //クリックした要素の#を変数に入れる
        var Target = $(this.hash);
        //行き先までの画面上の高さの数値を変数に入れる
        var TargetOffset = $(Target).offset().top;
        //アニメーション時間ミリ秒
        var Time = 700;
        //集めた情報を元にアニメーション
        $('html, body').animate({
            scrollTop: TargetOffset
        }, Time);
        return false;
    });
});