過去の記事「[jQuery]スクロール位置を制御する」にてjQueryでブラウザをスクロールさせる方法を書きましたが、今度はそれを滑らかにスクロールさせる方法になります。プラグインで処理を行ってくれるものもありますが、あえてプラグインを使わずに標準で用意されたものだけを使用しています。
滑らかにスクロールをさせるには、animateメソッドを使用します。下記のサンプルコードはidが「switch」の要素をクリックすると1秒かけてじんわりと最上部へスクロールします。
[javascript]
$(function(){
$(‘#switch’).click(function(){
$(‘html, body’).animate({
‘scrollTop’: 0
}, 1000, ‘swing’);
});
});
[/javascript]