ページ

2013/03/24

jQuery1.9以上対応版クロスブラウザ対応アニメーションスクロール

jQuery.browserが使えなくなったため、
クロスブラウザ対応!jQueryのアニメーションスクロール | DevAchieve
使用している animatedScroll 関数は動かなくなります。たぶん。
なので jQuery 1.9 に対応した形で作り直しました。

サンプルページはこちら。
jQuery animated scroll sample page
function animatedScroll(selector, speed, animation, complete){
    var isScrolled = false;
    var setScrolled = function(){
        isScrolled = true;
    }
    $('html').animate({scrollTop: $(selector).offset().top}, speed, animation, setScrolled);
    if(isScrolled){
        complete();
    }else{
        $('body').animate({scrollTop: $(selector).offset().top}, speed, animation, complete);
    }
}
設定の仕方は以前と同じ。
変数渡せる値デフォルト値
(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('#top', 'fast', 'swing', null);
        }
    };
    function animatedScroll(selector, speed, animation, complete){
        var isScrolled = false;
        var setScrolled = function(){
            isScrolled = true;
        }
        $('html').animate({scrollTop: $(selector).offset().top}, speed, animation, setScrolled);
        if(isScrolled){
            complete();
        }else{
            $('body').animate({scrollTop: $(selector).offset().top}, speed, animation, complete);
        }
    }
--></script>