アンカーリンクの飛び先の位置をピクセル単位でずらす

アンカーリンク（いわゆるページ内リンクってやつ）で飛ぶ位置は、指定したIDの場所です。
例えば

アンカーリンク

と書けば、id="target01"が指定されている要素がページの一番上に来るように表示されます。
飛び先のidの指定はタグで無くても良いんですけど、昔はみたいに書いてました。
今でもこの方法でも良いですし、今回はこれでやってみます。

アンカーの飛び先（一番上に来る表示位置）をずらしたい場合というのが最近あるわけです。
どういうときかというと、ヘッダをCSSで固定表示している場合。
スクロールしてもメニューが見えるように、ずっと一番上に付いてくるアレですね。

何も考えずにページ内リンクすると、ヘッダが付いてきている分、上の方が隠れてしまうのですね。
そこで、ヘッダの高さ分だけ表示位置をずらしたい、となるわけです。

前置きが長くなりましたが、具体的な方法としてはこんな感じ。
ターゲットにするタグをこんな風に書きます。



こうすると50ピクセル分だけ下にずれ、また他の要素には（多分）影響は無いです。
主要なブラウザで見てみましたが、ちゃんと動作するみたい。