jQueryでページ内をスムーズにスクロールさせる方法【初心者向け】

jQueryでページ内をスムーズにスクロールさせる方法【初心者向け】

ページ内を移動できるアンカーリンクではid名でジャンプ先を指定しますが、jQueryを使うと移動する時にスクロールでスムーズに移動させることができます。

スムーズなスクロールの動きをつけたほうが「同じページの中を移動したんだな」ということが視覚的にわかりやすいので、実装しておくとより見やすいページになります。

通常のページ内スクロールや、トップに戻るボタンにも使えるので便利ですよ。

スポンサーリンク

スムーズスクロールの実装方法

id名をリンク先に指定したaタグにのみスクロールが適用されるようにしました。例えば以下のようなタグですね。

<a href="#jump01">リンク1に移動</a>

実際に以下のjQueryのコードで実装ができます。

$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

コードの内容をおさらい

ひとつずつ内容を見ていきますね。

2行目

ここでは、idがリンク先のaタグをクリックしたら、という記述をしています。

$('a[href^=#]').click(function(){

実際id名を指定すると#(シャープ)から始まる書き方になるので、href^=#と書くことでリンク先(href)が#から始まるもののみを対象としています。

これは属性セレクタという指定の仕方になりますが、詳しくはこちらの記事で書いています。

CSSの属性セレクタを使い分ければ、特定の要素にスタイルが適用できる

3行目

3行目では、スクロールのスピードを設定しています。varを使った書き方は変数の宣言といって、特定の名前を使って数値や文字を入れることができます。

var speed = 500;

このspeedの部分ではあとで出てくるanimateの設定に使われているので、ここに入れることができるのはslow/normal/fast/数値(ミリ秒)の4つです。ここでは500ミリ秒と入れていますが自由に変更可能です。

ミリ秒の場合は数値を小さくすると早くスクロールされ、逆に大きくするとゆっくりスクロールされます。

4行目

4行目では、クリックしたaタグのリンク先(href)を取得して、hrefという変数に代入しています。必要な要素の取得ですね。

var href= $(this).attr("href");

5行目

5行目では、4行目で取得したリンク先(href)のidがある要素を探して、targetという変数に代入しています。

var target = $(href == "#" || href == "" ? 'html' : href);

6行目

6行目では、5行目で探したidの要素の位置をoffset()で取得して、positionという変数に代入しています。

var position = target.offset().top;

7行目

7行目では、animate()関数と3〜6行目で取得した変数を使って、aタグをクリックした時に指定した要素までスクロールで移動するという記述をしています。

$("html, body").animate({scrollTop:position}, speed, "swing");

animateの最後にswingという値が入ってますが、これはlinearとswingの2種類があります。違いとしては

linear: 等速で移動

swing: 徐々に加速して、徐々に減速して移動

という違いがあります。微妙な違いですがswingのほうが動きに変化があります。

まとめ

というわけで、スムーズなスクロールで移動するjQueryのコード紹介でした。

初心者の方向けによく使うコードを今後も色々紹介していきたいと思いますので、参考にしていただけると嬉しいです。

jQueryそのものがよくわからない・・・!という方は、基本をつめこんだ記事もあるのでこちらもどうぞ!

jQuery初心者のための、jQueryの基本的な知識についてまとめました

スポンサーリンク

SNS・feed登録はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です