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

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

アンカーリンク

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

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

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

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



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

コメント

このブログの人気の投稿

FacebookアプリのSMSアップデートの通知をオフにする

【解決!】InDesignのエラー「ファイルが存在しないか、ファイルへのアクセス権がないか、またはファイルが別のアプリケーションで使用されている可能性があります。」

子どもがマイクラPEで、友だちとオンラインマルチプレイをやりたいと言い出したときの話。

Adobe Photoshop CS6の自動保存機能のファイル保存場所

Healbe Gobeが来た! ファースト レビュー。