ページ内リンクで上部に固定配置の要素がある場合の対応方法

サイト全体で共通ヘッダーが上部固定で追従する場合、ページ内リンクの位置をずらす設定はJavaScript側で対応できますが、特定のページだけ上部固定要素が追従するような場合だと、JavaScript側だと対応しにくい場合があります。
今回は上部固定要素がある場合のページ内リンクの対応をCSSで試してみます。

サンプルコード

まずは対応前のサンプルです。

<ul class="nav">
	<li><a href="#sec01">section01</a></li>
	<li><a href="#sec02">section02</a></li>
	<li><a href="#sec03">section03</a></li>
</ul>

<section id="sec01" class="sec">
	<h2>section01</h2>
</section>
<section id="sec02" class="sec">
	<h2>section02</h2>
</section>
<section id="sec03" class="sec">
	<h2>section03</h2>
</section>

.navが上部固定要素になります。

次にCSSです。
今回の記事に関連する部分のみ抜粋しています。

.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
}

最後にページ内リンクのスムーズスクロールのJavaScriptです。

$(function() {
	$('a[href ^= "#"]').click(function(e) {
		e.preventDefault();
		$('html,body').animate({
			scrollTop: $($(this).attr('href')).offset().top
		}, 300);
	})
});

これで試してみると、ナビが固定されている分だけセクションにナビが被ってしまいます。
うまくいかない場合のデモページ

対応方法ですが、上部固定要素の高さ分だけpadding-topとマイナス値でmargin-topを設定します。

.sec {
	padding-top: 50px;
	margin-top: -50px;
}

これでセクションにナビが被らないようになりました。
対応後のデモページ
ただし、セクション内でposition: absolute;を設定している要素がある場合など、中の要素によっては他部分も調整が必要になる場合もありますのでご注意ください。