【jQuery】スムーズスクロールを実装する例|ページ内リンク移動・animateメソッド

今回は、jQueryを使用したページ内リンクのスムーズスクロールのソースコードの例となります。

【jQuery】ページ内リンク移動をスムーズスクロールにする例

以下、jQueryを利用したソースコードの例となり、ページ内リンクをクリックすると、リンクされている場所までスムーズなスクロールで、画面移動を行います。

jQuery(function($){
	$('a[href^="#"]').click(function(event) {
    	// jQueryでページ移動を実装するため、通常のクリックイベントをブロック
    	event.preventDefault();
    	// クリックした要素のhref属性の値を取得
 		var anchor = $(this).attr("href"); 
        // 表示位置を取得
 		var position = $(anchor).offset().top-20; 
        // アニメーションの効果の作成
 		$('body,html').animate({ scrollTop : position }, 500); 
	});
});

ソースコードの説明

以下、jQueryのポイントとなる箇所の説明となります。

clickメソッドのセレクタに「ページ内リンク」となる要素を指定

ページ内リンクをクリックするとスムーズスクロールをさせるため、clickメソッドのセレクタには、「ページ内リンク」となる要素を指定します。

例のソースコード2行目のclickメソッドのセレクタ

a[href^="#"]

上記例では、ページ内リンクの要素を指定するため、clickメソッドのセレクタを「href属性の値が"#"から始まる」要素として指定しています。

詳しくは以下のリンク先の「E[foo^="bar"]」の項目を参考にしてみてください。

通常のイベント処理をブロック|preventDefaultメソッド

preventDefaultメソッドでは、デフォルトのイベント処理をブロックできます。

例のソースコード3行目

// jQueryでページ移動を実装するため、通常のクリックイベントをブロック
event.preventDefault();

例では、aタグクリック時にjQueryを利用しページ内移動を実装するため、通常のクリックイベントでのページ内移動をブロックしています。

要素の属性の値を取得|attrメソッド 

attrメソッド では、セレクタで指定した要素の属性値を取得します。

例のソースコード5行目

// クリックした要素のhref属性の値を取得
var anchor = $(this).attr("href");

上記例では、attrメソッドのセレクタにthisを指定することで、クリックした要素のhref属性の値を取得しています。

要素の表示位置を取得|offsetメソッド 

offsetメソッド では、セレクタで指定した要素の表示位置を取得できます。

例のソースコード7行目

// 表示位置を取得
var position = $(anchor).offset().top-20; 

上記例では、アンカーリンクの移動先の位置を指定するために、offsetメソッドのセレクタを変数anchor(attrメソッドで取得した値)としています。

また、offsetメソッドのプロパティを利用することで取得する位置を調節することもできます。例ではプロパティtopを利用し-20pxの位置としています。

アニメーション効果の作成|animateメソッド 

animateメソッドではアニメーション効果を作成でき、以下の引数を指定します。

  • 第1引数(必須)には、アニメーションで変化後の状態を、CSSのプロパティと値を利用しマップ型で指定。(一部利用できないプロティあり)
  • 第2引数(任意)には、アニメーションの動作時間を指定。初期値は400
  • 第3引数(任意)には、アニメーションのイージング(加速・減速)を指定。期値はswing
  • 第4引数(任意)には、アニメーション終了時に実行する関数を指定

また、animateメソッドには上記ではない引数の指定方法もあります。詳しくは文末の参考サイト内を確認してみてください。

例のソースコード9行目

// アニメーションの効果の作成
$('body,html').animate({ scrollTop : position }, 500); 

上記例ではanimateメソッドの引数を次のように指定しています。

第1引数には通常、アニメーション後の状態をCSSのプロパティと値で指定しますが、今回の例で指定しているscrollTopは、animateメソッドで利用できるカスタムプロパティとなり、画面上部の位置を指定できます。

そのため、例ではアニメーション後の状態を、scrollTop(画面上部の位置)の値が、変数positionの位置(offsetメソッドで取得した位置)となるように指定しています。

第2引数にはアニメーションの動作時間として0.5秒を指定しています。

また、animateメソッドのセレクタには、body以外にhtmlを指定しています。理由は、ブラウザによって、セレクタがhtmlでないとanimateメソッドが機能しないため指定しています。

CSSのみでスムーススクロールを実装する場合

今回は、jQueryを利用したスムーススクロールの例でしたがCSSのみで実装する方法もあります。詳しくは以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。