ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。

ページ内リンクをクリックした場合にスムーズにスクロールするようにしてくれるjQueryプラグインです。同じようなプラグインはたくさん公開されているのですが、これだ!というのがなかなかなかったので自作してみました。

ダウンロード

デモページ

使い方

下記のような感じでjQueryとjQuery.smoothScroll.jsを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.smoothScroll.js"></script>

あとは普通にページ内リンクを設定するだけです。

<div id="header">
   ヘッダー内容
</div>
<div id="content">
・・
<a href="#header">ページトップへ</a>
・・
</div>

jquery.smoothScroll.js内に実行コードが記述してあり、そこのオプションを変更することでスクロールのスピードや動き方(イージング)をカスタマイズすることもできます。イージングの種類は「jQuery UI Effects – Easing demo」をご参照ください。

jQuery(function($) {
  $('a[href^="#"]').SmoothScroll({
    duration : 2000,  // スピード(ミリ秒)
    easing : 'easeOutQuint' // 動き(イージング)
  });
});

裏話とか…

プラグイン化されていないスムーススクロールのコードなどもググると結構あるのですが、存在しないアンカーを指定したときにエラーが出たりとか、ブラウザによって動作しない、なんてのもあったので、そのあたりを考慮して作成しました。

また、スクロールさせるためのscrollTopというメソッドが、Webkit系では$(‘body’)でしか動かず、Webkit系以外では$(‘html’)でしか動かないということになっており、対処法として

$('html,body').animate({scrollTop …

としているのが多かったようなのですが、animateでコールバックを指定したときにhtmlとbodyで2度実行されてしまうらしいので、この指定はNGです。

で、その対処法として下記ように$.browserで条件分岐させる方法がよく用いられているそうです。

$($.browser.safari ? "body" : "html").animate({ scrollTop …

ただ、この$.browserはjQuery1.3から非推奨となっている模様。いつ廃止されてもおかしくないと思うので、これも使うべきではありません。jQuery1.3からは代わりに$.supportを使うようです。

$.supportはブラウザがサポートしている機能を判別できるもので、それを利用してブラウザを判別しようというものなのですが、上記サイトのコメント欄などみると、ブラウザのバージョンがあがったりするとサポートする機能が変わったりとかして判別がえらく煩雑な印象。ということでこれもNGと。

そこで、下記のコードで判別するようにしました。

if ( $('html').scrollTop() > 0 ) {
  var targetBody = $('html');
} else if ( $('body').scrollTop() > 0 ) {
  var targetBody = $('body');
}

Webkit系では$(‘html’).scrollTop()で位置がかえり、$(‘body’).scrollTop()では0が返ります。Webkit系以外ではその逆ですね。

これで万事解決かと思ったのですが、まだ問題が。全くスクロールしていない状態だと、$(‘html’).scrollTop()も$(‘body’).scrollTop()も0!そりゃそうか、スクロール位置を返すんだから…。

試行錯誤した結果、まず1pxずらしてから判別する方法で実装しました。

var wst = $(window).scrollTop();
$(window).scrollTop( wst + 1 );
if ( $('html').scrollTop() > 0 ) {
  var targetBody = $('html');
} else if ( $('body').scrollTop() > 0 ) {
  var targetBody = $('body');
}

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。 さらに詳しく

Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。 さらに詳しく

この投稿へのコメント

  1. れいな said on 2012年10月15日 at 2:47 AM

    はじめまして、れいなと申します、こんにちは。
    自分のブログにこちらのスクリプトを実装させていただきました。
    とても簡単にできました!すごくいいですね^^
    ありがとうございました。

  2. まさみち said on 2012年10月18日 at 8:56 AM

    他のスクリプト使ってましたが、バグが多くてこまってました。。

    簡単に使用できてバグもない、、いいですね。助かりました。

    ありがとうございます。使わせてもらいます。

  3. MASATO said on 2013年1月23日 at 5:17 PM

    はじめまして。私も小気味よく動くスクロールを探していました。
    スムーススクロールは実に気持ち良く動きますね!
    早速使わせていただきました。ありがとうございます。

  4. K said on 2013年1月24日 at 5:46 PM

    はじめまして、大変参考になりました。
    ありがとう御座います。

    「jquery-1.9.0.min.js」では動きませんでした。
    「jquery-migrate-1.0.0.js」を追加する事で諸々、上手く動きました。

    jQuary1.9で困っている人は参考にしてみて下さいm( _ _ )m

  5. Morry said on 2013年1月31日 at 10:04 PM

    スクロールさせたくない部分はどうすると良いでしょうか
    ページ内で複数のタブを作っている場合、そのタブをクリックした時にも反応してしまいます

  6. キタジマタカシ said on 2013年2月1日 at 11:54 AM

    Morryさま
    プラグイン本体を改造すれば可能です(正確には、「スクロールさせたい部分」を設定できます)。
    例えば、「#pageTop a」にだけ適用させたい場合は、

    // ここを
    $('a[href^="#"]').SmoothScroll({
    // こう改造
    $('#pageTop a[href^="#"]').SmoothScroll({
    
  7. PIGALLE said on 2013年3月31日 at 4:00 PM

    とても優れていて、助かりました。
    1点ご質問なのですが、現在MENU(height=130px)をheaderに固定しており、
    menu高さ130px分だけ下げた位置にscrollさせたいのですが、
    その場合は、どうしたらよろしいでしょうか。
    初心者でもうしわけありませんが
    ご教示お願いいたします。

  8. キタジマタカシ said on 2013年4月8日 at 2:43 PM

    PIGALLEさま

    メニューをクリックすると130px下にスクロールさせたい、ということでしょうか?
    その場合だと、メニューの下の要素に id をつけて、メニューのリンクボタンのリンク先にその id を指定すれば良いと思います。

  9. ひで爺 said on 2013年4月12日 at 10:27 PM

    はじめまして。 スムーススクロールは実に気持ち良く動きますね!
    早速使わせていただいてます。
    一つ質問です。スムーススクロールした後にブラウザの戻るを押してもページが戻らないのですが… ボタンを二度押すと前のページに戻ります。
    一度のクリックで前のページに戻るには、どこを書き換えればいいのでしょうか? 
    初心者で申し訳ありませんがご教示お願いいたします。

  10. techranger said on 2013年4月20日 at 6:40 AM

    画面を下にスクロールしない状態で
    ページの最上部に張ったリンクをクリックすると
    durationで設定した時間の間下にスクロールできません。
    例えば、デモページを開いてすぐに「ページトップへ」のリンクを
    連打すると、(durationで指定した秒数×クリックした回数)の間
    上に戻ろうとする動きをしているため下にスクロールできません。

    これはどのように解消したらよいでしょうか。

  11. サイトウ said on 2013年4月21日 at 10:20 PM

    はじめまして、サイトウと申します。
    プラグインを探していたところ発見しました。
    早速使わせていただきました。ありがとうございます。

  12. キタジマタカシ said on 2013年4月25日 at 8:14 AM

    techrangerさま
    お使いのバージョンは何でしょうか?少し前のバージョンだとそのバグがあったのですが、現在のバージョンだと修正済み…のつもりだったのですが…。

  13. キタジマタカシ said on 2013年4月25日 at 8:17 AM

    ひで爺さま
    普通のアンカーリンクをクリックした場合そのような操作になるので、このプラグインを使った場合でもそのような動作になるように合わせています。もし変更する場合は「location.hash = targetHash;」を削除してみてください(ただ、動作検証していないので不具合が発生するかわかりません…)。

  14. ひで爺 said on 2013年5月3日 at 8:49 PM

    ありがとうございます! 不具合も見当たらず気持ち良く動いています!

  15. Webbie said on 2014年3月21日 at 11:00 PM

    とても助かっています!感謝!感謝!
    他の方の質問にも多分同様のことがあったのですが・・・
    ヘッダーを固定してます。固定しているヘッダーの下にアンカーリンク先が隠れないようにしたいです。
    ご教授ください!よろしくお願いいたします!

  16. ニャンキー said on 2014年6月27日 at 3:50 PM

    他のスクリプトでは動かず困っていましたが、こちらは動きました。とても助かりました。ありがとうございました!

コメントを残す

この投稿へのトラックバック

  1. […] ef^="#"]').smoothScroll({ duration : 2000, //スピード(ミリ秒) easing : 'easeOutQuint'  //動き(イージング) }); }); こちら「モンキーレンチ」のサイトを参考にさせて頂きました。 […]

  2. なめらかなスクロールのお話。 | aok123.blog said on 2012年12月17日 at 8:46 PM

    […] ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。 モンキーレンチ […]

  3. […] ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。 | モンキーレンチ […]

  4. […] マホ状態のfooterへ移動するページ内リンクで使用してるスルーって動くスクロールは、MONKEY WRENCHさん作成のスクリプトを使いました。DEMOでは使ってますが、ソースコードには組み込んで […]

  5. […] に2重で動作してしまうようです。詳しくは ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。 | モンキーレンチ こちらの記事を参照させていただきました […]

  6. […] http://2inc.org/blog/2012/02/14/1233/ […]

  7. ページ内スクロールについて | Blog said on 2014年11月1日 at 9:10 PM

    […] そういう時、ヌルヌル〜っと動くように、smoothScroll.jsとか使います。 […]

  8. […] このjQueryプラグインは、モンキーレンチのキタジマタカシさんが作成したもので、コチラの記事で裏話とかも書かれています。 […]

  9. […] のプラグイン作者の方) http://2inc.org/blog/2012/02/14/1233/ […]

  10. よく使うjQueryプラグイン – マメニッキ said on 2016年5月28日 at 4:15 PM

    […] http://2inc.org/blog/2012/02/14/1233/ […]

トラックバック URL