ホーム > タグ > jQuery

jQuery

ページ内アンカーでスムーズにスクロールする

jQueryを使って、ページ内アンカーをクリックしたときにスムーズに目標箇所までスクロールするためのスクリプト。

僕はよくやるのですが、コードを書く前に、どういうことをすればいいのかを具体的に言葉で表現してみると、

Documentのロードが終わったときに、href属性が”#”で始まるアンカーを探し、クリックイベントとしてそのhref属性（からハッシュを除いた値）をidとして持つ要素のオフセットを取得して、そこまで滑らかにスクロールする処理を設定する。

となります。

で、それをコードにしたのがこちら。

jQuery(function($){
	$('a[href^="#"]').click(function(){
		$('html, body').animate(
			{ scrollTop : $($(this).attr('href')).offset().top }
		);
		return false;
	});
});

蛇足ながら解説します。

jQuery( callback($) )
$(document).ready()の短縮形。コールバック関数の引数として$を与えるのが吉です。（$がコンフリクトするのを防ぎます）
属性セレクタ [name ^= value]
name属性の値がvalueで始まる要素を選択します。
animate( properties, options )
propertiesに指定されたstyleを、現在値から設定値まで滑らかに変化させます。optionsには変化量関数、アニメーション時間の指定などが可能です。今回はoptionsを指定していません。

アニメーションさせる要素をhtmlとbodyにしているのは、クロスブラウザのためです。（ここが一番重要だったり・・・）

Share

ホーム > タグ > jQuery

Profile

Akira Koyasu

View Full Profile →

Pages
Search
Languages
Calendar
« 2013 年 May »
M T W T F S S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
Recent Posts
Tag cloud
Categories
Twitter
RSS feed

RSS Feed RSS - Posts

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Advertisement

ページの上部に戻る