内部リンクのスクロール位置をずらす方法

現在、ヘッダー部分等、position: fixed;にて固定したレイアウトの場合がよくあります。
その場合、内部リンクがあると、ヘッダー部分の縦幅分、スクロール位置を調整する必要が出てきます。
ネガティブマージン（negative margin）を使って調整をする方法もありますが、
レイアウトにもよりますが、ネガティブマージンを設定してしまうと、
レイアウトが崩れてしまうケースがあります。
今回は、スムースにスクロールする際によく使われるjQueryのスクロール位置の調整方法をご紹介します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('a[href^=#]').click(function(){
		var adjust = 300;
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top + adjust;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>

（※300px下にずらした場合の記述です。）

関連記事