ヘッダが固定されているページで、ページ内リンクの位置を調整する

Twitter Bootstrapとかを使っていると、ヘッダ部分を簡単に固定することができます。Qiitaのヘッダとかもそうです。
ただここで問題なのが、同一ページ内でidとかnameを使って遷移する場合、そのままだとリンク先の部分がヘッダに隠れてしまいます。
Qiitaでまさにこの問題にハマりました。

解決方法

方法はいろいろあると思いますが、とりあえず簡単にやりたいなーということで空の<span>を使う方法を選択しました。
コメントで教えていただいたのですが、見出しの中にblock要素を入れるのは標準規約違反となるので注意して下さい。
見出し部分のソースは下のとおりになっています。

<h1>
  <span id="1-1"></span>
    <a href="#1-1"><i class="icon-link"></i></a>簡単なまとめ
</h1>

<h1>に空の<span>が入っているのがわかるかと思います。
この空spanに対して、下のようにスタイルを適用します。

h1 > span {
  position: relative;
  top: -65px;
  display: block;
}

topは開けたい空間のサイズを設定してください。Qiitaの場合、ヘッダが40pxあって、ヘッダのすぐ下だと見難いので若干広めに幅を持たせるために多めにしています。
こうするとリンク先はヘッダにめり込むようになるんですが、空divなので表示上は特に問題ないですし、変な影響も出てない(はず)です。

この左側のアイコンがリンクになっているのでクリックすると、

こんなかんじでリンク先の見出しがヘッダにめり込んでしまっていたのが、

良い感じの位置になりました。

他にもっといい方法あればコメントいただけるとうれしいです。

注意点

• クロスブラウザチェック甘いので、ブラウザの種類やバージョンによっては正しく動作しない可能性があります。