4月 | 2011 | Almondlab

jQueryでアンカーポイントまでスクロール。

2011.04.01 / Labs

jQueryでページ内のアンカーポイントまでスムーズにスクロールするスクリプトです。
スクロールのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

function scrollToAnchor() {
	$("a[href*=#]").click(function() {
		var target = this.hash;
		var offset = $(target).offset().top;
		if (offset > $(document).height()-$(window).height()) {
			offset = $(document).height()-$(window).height();
		}
		$("html, body").animate({scrollTop:offset}, {duration:1000, easing:"easeOutQuart"});
		return false;
	});
}

function scrollToAnchor() {

$("a[href*=#]").click(function() {

var target = this.hash;

var offset = $(target).offset().top;

if (offset > $(document).height()-$(window).height()) {

offset = $(document).height()-$(window).height();

}

$("html, body").animate({scrollTop:offset}, {duration:1000, easing:"easeOutQuart"});

return false;

});

}

<a>タグのリンクからハッシュ（#の部分）のみを抽出して、ページ先頭からの高さを調べています。

2011.4