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

Tweet

Category JavaScript / Tagged jQuery 2012/01/14

よく見かける、にゅる～んと移動する「ページ上部へ」のリンク、つるるるる…と移動するページ内リンクの実装例です。

a要素で、href属性に、#を含むものに対して、クリックしたときに目的の要素までぬるっとアニメーションして移動するように、ページロード時に仕込んでおきます。クリックしたときの通常の動作は「return false;」で抑止します。

DEMO

ページ内リンクをスムーズに移動する – デモ

JavaScriptは、これだけです。

JavaScript

$(function(){

	$('a[href*=#]').click(function() {
		$(this.hash).each(function(){
			$('html,body').animate({scrollTop: $(this).offset().top}, 800);
		});
		return false;
	});

});