【jQuery】アニメーションなしで移動するアンカーリンク の方法

みなさん、こんにちは。

アンカーリンク でページ内移動するときはスムーズスクロールが定番になっていますが、アニメーションの演出の都合上、瞬時にページ内移動させたい時ってありますよね。

そんなときに使えるアニメーションなしで移動するアンカーリンク の方法をご紹介します。

アニメーションなしで移動するアンカーリンク の方法

まずは一般的に使われているスムーズスクロールです。

スムーズスクロール

$('.js-scroll').click(function(){
	var position = $($(this).attr('href')).offset().top;
	$('html,body').animate({ scrollTop: position }, 'slow','swing');
	return false;
})

次にスクロールアニメーションなしのスクロールです。

スムーズなしスクロール

$('.js-scroll').click(function(){
	var position = $($(this).attr('href')).offset().top;
	$('html,body').scrollTop(position);
	return false;
})

まとめ

ページ内移動の演出を凝りたいときや、pjaxで画面を切り替えるアニメーションのときにページ上部に移動させるのに使いそうですね。

参考サイト

http://coolwebwindow.com/jquery-lab/archives/467