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

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');
}
  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。