クロスブラウザ対応!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を渡した時) | 説明 |
---|---|---|---|
selector | jQueryの要素取得の記法 | なし(動かない) | 関数内で要素の取得を行なっている。 |
speed | slow | fast | 任意の数値 | null | 400ms | slow: 600ms, fast: 200ms |
animation | linear | swing | null | linear | linearは等速、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>