WEBサイトのファーストビューに背景画像のフルスクリーン表示を取り入れた時に下にもコンテンツがあることを分かりやすくするために、ページ内リンクボタンを設置することがあリます。

↓ こんな感じで。

この時にスティッキーヘッダーなどをデザインに取り入れて、ヘッダーをposition:fixedで固定表示にしていると、ページ内リンクボタンでジャンプした後の表示位置がヘッダー部分に潜り込んでズレてしまいます。

ページ内リンクの表示位置がずれた時の調整方法

JavaScriptを使えば簡単です。

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

変数positionにoffset().topからヘッダーの高さ(今回は80px)分引いて代入すればOKです。

[adsense]