jQueryでページ内リンクをなめらかにする

更新日：2015年9月6日

ページ内リンクはクリックした瞬間にリンク先に飛びます。
いうなれば瞬間移動するといった感じです。

ただ、あまりにも瞬間的過ぎて素っ気ない為、もう少しアニメーションの効果が欲しくなるといった場合もあるかと思います。

そこでjQueryでページ内リンクをなめらかに移動する記述のご紹介です。
jQueryのみで動きます。プラグインは一切必要ありません。

ではその記述ですが、jQueryで

$(function() {
	$('a[href^=#]').click(function() {
		var speed = 600;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

と記述すればOKです。

内部リンク（＝aタグ）をクリックした時に実行されるjQueryで、これだけの記述でページ内リンクがなめらかになります。

var speed = 600;の数値を変更することで移動のスピードの調整が出来ますので、お好みでどうぞ。