jQueryでスムーススクロール [jQuery]

2014年に制作した記事を2015/08に加筆修正

プラグインを使わずにjQueryを使ってスムーズにスクロールさせるコードです。
ページ内リンク（アンカー）をクリックすると、指定の場所にふんわり（ぬるっと？）スクロールするアレです。
ちなみに、この「コーダー日誌」でも使用させていただいております。
jQueryライブラリが読み込まれていることが前提です。

sample

ここをクリック

リンクをクリックすると動作します。

このサンプルではIE6～8でエラーになりますが、SyntaxHighlighterというプラグインが邪魔しているためです。通常はIE6～8でも動作するはずです。

html

<a href="#anc">ジャンプ元</a>

<div id="anc">ジャンプ先</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

通常通り、ジャンプ元、ジャンプ先を用意してください。

css

とくにcssの設定は必要ありません。
ジャンプ元をボタン画像にするとか、ジャンプ先のデザインとか、状況に合わせて適宜cssを設定してください。

js

$(function(){
    $('a[href^=#]').click(function() {
        var speed = 500; //スクロールの速度
        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;
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

#から始まるリンクを探して、スクロールの動きを処理しています。

コードのカスタマイズの必要性はほとんどなく、コピペで使用できます。
変数[speed]の値が大きければ、ゆっくり動作するので、適宜値を変更してみてください。

  • 変数[speed]はジャンプ先に移動するまでの時間（ミリ秒）を設定することになります。
    なので、すぐ近くのジャンプ先にはゆっくりスクロールしているように見え、遠いジャンプ先には素早くスクロールしているように見えます。
  • jQuery Easing Pluginやjquery.easie.jsを組み合わせれば、swingの部分を書き換えるだけで、少し変わった動きを付けることができます。

なお、「jQueryのプラグイン導入・・・jQuery Migrateについても」でも述べている通り、jqueryライブラリは1.9.x以降、コードの削除や変更が行われました。
そのため、jqueryライブラリのバージョンを1.9.x以降に変更すると、以前組んだコードが動作しなくなることがあります。
このスムーススクロールはプラグインではありませんが、jquery1.9.x以降ならば少しコードの修正が必要です。

→7行目
$($.browser.safari ? 'body' : 'html')
を
$('body,html')
に。

カスタマイズ

同一ページ内に、スムーズに移動する必要のないページ内リンク（アンカー）があった場合の処理の一例です。
例えばタブ切り替えのためにaタグを使用し、href属性に#から始まるアンカーを使っていた場合は、スムーススクロールとタブ切り替えのどちらかに不具合が生じるので以下を参照してください。

<a href="#anc1">ジャンプ元1</a>
<a href="#anc2">ジャンプ元2</a>
<a href="#test">ジャンプ元（スムーズなし）</a>

<div id="anc1">ジャンプ先1</div>
<div id="anc2">ジャンプ先2</div>
<div id="test">ジャンプ先（スムーズなし）</div>

$(function(){
    $('a[href^=#anc]').click(function() {
    var speed = 500; //スクロールの速度
        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;
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

スムーススクロールを適用するリンクを[#]だけで判定していたのを[#anc]で判定するようにしました（[anc]の部分は好きな文字列でよいです・・・一般的な名づけルールに従ってください）。
上記の例では、[anc]がついていない[test]にはスムーススクロールが適用されません。

戻る

Top