jQueryで簡単にスムーズスクロールを実装

Webサイトを作っているとjQueryを利用する機会も多いと思います。今回は、簡単な記述でスムーズにページの先頭へ戻ってくれるスクリプトを作ってみたいと思います。

$(function() {
　　$('#toTop a').click(function() {
　　　　$('html').animate({
　　　　　　scrollTop: 0
　　　　　　},
　　　　　　'swing'
　　　　);
　　　　return false;
　　});
});

これは、ID「toTop」がついたリンクをクリックしたら、セレクターhtmlに対してスクロールするアニメーションをするという命令になります。
「scrollTop」は最初の要素の現在のスクロール上の上位置を取得するということで、0を指定しているので上から0の位置を取得しています。「swing」は、どのように動くかの指定で、この場合は最初はゆっくりで徐々に速くなっていく動きになります。「linear」と指定すると、一定の速さで動くようになります。

• DEMO

以上が、jQueryを使って簡単にスムーズスクロールを実装する方法となります。