追記: 2013/03/24
jQuery.browser が jQuery v1.9 で廃止されたので対応版の記事を書きました。jQuery1.9以上対応版クロスブラウザ対応アニメーションスクロール | DevAchieve
元の本文はココから
| OS | Browser | Version |
|---|---|---|
| Windows | Internet Explorer | 9 |
| Windows | Google Chrome | 22 |
| Windows | Mozilla Firefox | 14 |
| Windows | Opera | 12 |
| Mac | Safari | 6 |
| Mac | Google Chrome | 21 |
| Mac | Mozilla Firefox | 14 |
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を渡した時) | 説明 |
|---|---|---|---|
| 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('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
Chrome ウェブストア - Quote Tweet