ページ内リンクをスムーズにスクロールさせる

jQueryを使用して、ページ内リンクをクリックしたときに、スムーズにスクロールするサンプルです。
ヘッダーが追従するようなサイトにも対応しています。

ページ内リンクをスムーズにスクロールさせるのデモページ

サンプルコード

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

基本的にはよくあるスムーズスクロールで、hrefの値が「#」から始まるリンクをクリックしたときに実行されます。
そのため、index.htmlページで「href=”index.html#block02″」のような
「#」から始まらないページ内リンクをクリックしたときには実行されません。

spacerの部分でヘッダー分の高さを指定して、ページ内リンクの位置をヘッダーの高さ分下にずらすようにしています。

spacerの値を自動で取得したい場合は、

var spacer = $('#header').outerHeight();

のようにすれば取得できます。