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

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

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

以下がjQueryを利用したソースコードの例となります。

例ではページ内リンクをクリックすると、リンクされている場所までスムーズなスクロールで、画面移動を行います。

jQuery(function($){
	$('a[href^="#"]').click(function() {
    	// クリックした要素のhref属性の値を取得
 		var anchor = $(this).attr("href"); 
        // 表示位置を取得
 		var position = $(anchor).offset().top-20; 
        // アニメーションの効果の作成
 		$('body,html').animate({ scrollTop : position }, 500, 'swing'); 
 		return false;
	});
});

ソースコードの説明

以下に、ソースコードのポイントを説明します。

a[href^=#] <href属性の値が"#"から始まる要素を指定>

まずは、ページ内リンクをクリックするとスムーズスクロールをさせるために、クリックしてイベントを発生させる要素を、clickメソッドのセレクタで指定します。

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

a[href^="#"]

今回の例では、上記のように指定するこにより、href属性の値が"#"から始まる要素すべてを指定します。

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

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

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

例のソースコード3行目

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

attrメソッドのセレクタにthisを指定することで、今回の例では、クリックした箇所のhref属性の値を取得しています。そして、取得した値は変数anchor に格納しています。

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

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

例のソースコード5行目

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

例では、セレクタを変数anchor(上記のattrメソッドで取得した値)に指定し、プロパティtopにて、そこから-20px上の位置を取得しています。そして、取得した位置は変数position に格納しています。

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

animateメソッドでは、アニメーション効果を作成できます。

第1引数にはアニメーションで変化させる値を指定します。第2引数にはアニメーションの動作時間、第3引数にはアニメーションの変化量を調節するeasing名(独自のアニメーション効果を作成する関数)を渡します。

今回の例では指定しませんでしたが、第4引数には、アニメーション終了時に実行する関数のポインタを渡すことができます。

例のソースコード7行目

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

例では、animateメソッドの第1引数で、scrollTopの位置(画面上部の位置)を、変数positionの位置(上記offsetメソッドで取得した位置)に、アニメーションで移動させるように指定します。

第2引数に、アニメーションの動作時間の0.5秒を指定、第3引数にeasing名のswingを指定しました。

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

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。