ページ内リンクのジャンプ位置を調整する方法

ページ内リンクにジャンプをすると、微妙に表示位置が上にずれますよね。
それを解消するための方法を(いつも忘れてしまうので…)メモしておきます。

HTML

<!--目次-->
<a href="#link-a">リンク</a>

<!--コンテンツ-->
<h2 id="link-a" class="midashi">リンク先のコンテンツ</h2>

CSS

.midashi{
padding-top: 80px;
margin-top: -80px;
}

上記のように、リンク先のコンテンツに「padding-top」を指定し、擬似的に位置をずらします。
さらに「margin-top」でそれを打ち消すことで見た目上の違和感を無くします。

これだけです!