2011年09月01日に投稿

[jQuery] プラグインを使用せずに、滑らかにブラウザをスクロールさせる

過去の記事「[jQuery] スクロール位置を制御する」にて jQuery でブラウザをスクロールさせる方法を書きましたが、今度はそれを滑らかにスクロールさせる方法になります。プラグインで処理を行ってくれるものもありますが、あえてプラグインを使わずに標準で用意されたものだけを使用しています。

滑らかにスクロールをさせるには、animate メソッドを使用します。下記のサンプルコードは id が switch の要素をクリックすると 1 秒かけてじんわりと最上部へスクロールします。

$(function(){
    $('#switch').click(function(){
        $('html, body').animate({
            'scrollTop': 0
        }, 1000, 'swing');
    });
});

$(function(){

$('#switch').click(function(){

$('html, body').animate({

'scrollTop': 0

}, 1000, 'swing');

});

関連記事