ページトップへのボタンをjQueryでスムーズにスクロールさせる

「ページトップへ」のボタンを押した時に、縦スクロールしてページのトップまで戻るjQueryのライブラリを、以前に紹介しましたが、今回はよりシンプルにjQueryのみで実装する方法です。

jQueryでページ内リンクをスムーズスクロール

前回は「ScrollTo」というライブラリを使用した方法でしたが、もうだいぶ古い情報なので、他に方法はないかと調べていたところ、何のことはない、ライブラリは不必要なのです。

あの頃は私もjQuery 1年生だったので、何でもかんでもライブラリを引っ張ってきていました。今は最低限の知識は得たつもりですが、その程度で十分に実装可能です。

方法はとても簡単です。「ページTOPへ」のクリックイベントに対して、以下のJSを組み込むだけです。

$('.pagetop').click(function(){
	$('html,body').animate({scrollTop: 0});
});

classに「pagetop」を設定した要素に対して、クリックするとページの先頭までスクロールします。

htmlに加えてbody要素を指定しているのはクロスブラウザ対応で、bodyがないとGoogle ChromeやSafariなどWEBKIT系で動作しません。

スクロール処理にはanimateを指定するので、スクロールスピードやエフェクトなどオプションを追加することもできますね。

さらに任意の要素までスクロールする際には、その要素のトップからの距離を取得してスクロールさせることができます。

var n = $(".section01").offset().top;
$('.to_section01').click(function(){
	$('html,body').animate({scrollTop: n});
});

これを活用すれば、アンカーリンクなどもスクロールに置き換えることができます。

htmlのコードは省きますが、以下のようにしてページ内リンクを置き換えることができます。

$('.menu a').each(function(i){
	$(this).click(function(){
		$('html,body').animate({scrollTop: $(".content"+i).offset().top});
		return false;
	});
});

例えばclass「menu」内の3番目のリンクをクリックすると、要素クラス「content2」の位置までスクロールします。
ここで、変数iは0からカウントされるため、プラス1番目となります。

私、個人的にはこの方法を重宝しています。