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

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にしているのは、クロスブラウザのためです。（ここが一番重要だったり・・・）