キタジマタカシ 
ページ内リンクをクリックした場合にスムーズにスクロールするようにしてくれる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');
}
