ページ

2012/08/25

クロスブラウザ対応!jQueryのアニメーションスクロール

追記: 2013/03/24

jQuery.browser が jQuery v1.9 で廃止されたので対応版の記事を書きました。
jQuery1.9以上対応版クロスブラウザ対応アニメーションスクロール | DevAchieve

元の本文はココから

OSBrowserVersion
WindowsInternet Explorer9
WindowsGoogle Chrome22
WindowsMozilla Firefox14
WindowsOpera12
MacSafari6
MacGoogle Chrome21
MacMozilla Firefox14
スムーズなスクロールを行うには
jQueryを使うのが一番楽でしょう。
地味にブラウザ毎に動きが異なったので
実際に右のブラウザでテストしてみました。
jQuery アニメーションスクロールサンプルページへ
function animatedScroll(selector, speed, animation, complete) {
    $($.browser.msie || $.browser.mozilla || $.browser.opera ? 'html' : 'body')
        .animate(
            {scrollTop: $(selector).offset().top},
            speed,
            animation,
            complete
        );
}
スクロールはブラウザ毎に少し異なっていて$.browserで判別している。
jQuery 1.3で廃止予定でプラグインでサポートされるようになるかもとか書かれているので
$.browserについての情報収集は欠かさないようにしといたほうがいいかもしれない。
IE, Firefox, Operaはhtmlでスクロールするが、Chrome, Safariはbodyでスクロールする。
変数渡せる値デフォルト値
(nullを渡した時)
説明
selectorjQueryの要素取得の記法なし(動かない)関数内で要素の取得を行なっている。
speedslow | fast | 任意の数値 | null400msslow: 600ms, fast: 200ms
animationlinear | swing | nulllinearlinearは等速、swingは加速して減速する。
complete(function) | nullなし(何も行わない)スクロール完了のコールバック関数。
<input type="button" class="btn btn-primary" value="Slow Linear Scroll" onclick="animatedScroll('#invite', 'slow', 'linear', onScrolled)" />
<input type="button" class="btn btn-info" value="Fast Linear Scroll" onclick="animatedScroll('#invite', 'fast', 'linear', onScrolled)" />
<input type="button" class="btn btn-success" value="3000ms Linear Scroll" onclick="animatedScroll('#invite', 3000, 'linear', onScrolled)" />
<input type="button" class="btn btn-warning" value="Slow Swing Scroll" onclick="animatedScroll('#invite', 'slow', 'swing', onScrolled)" />
<input type="button" class="btn btn-danger" value="Fast Swing Scroll" onclick="animatedScroll('#invite', 'fast', 'swing', onScrolled)" />
<input type="button" class="btn btn-inverse" value="3000ms Swing Scroll" onclick="animatedScroll('#invite', 3000, 'swing', onScrolled)" />
<script><!--
    var onScrolled = function onScrolled(){
        if(!confirm('お分かりいただけただろうか?')){
            animatedScroll('body', 'fast', 'swing', null);
        }
    };
    function animatedScroll(selector, speed, animation, complete) {
        $($.browser.msie || $.browser.mozilla || $.browser.opera ? 'html' : 'body').animate({scrollTop: $(selector).offset().top}, speed, animation, complete);
    }
--></script>
関連
jQuery.browser – jQuery API
.animate() – jQuery API
.offset() – jQuery API