[解決済み] ページヘッダーがページ内アンカーに重なるのを修正しました。

質問

HTMLページで、スクロールしないヘッダーがあり、上部に固定され、定義された高さを持つ場合、そのヘッダーはどうなりますか。

URLのアンカー( #fragment 部分) を使って、ブラウザがページ内のある地点までスクロールしても、固定要素の高さを尊重するようにします。 JavaScriptの助けを借りずに ?

http://example.com/#bar

WRONG (but the common behavior):         CORRECT:
+---------------------------------+ +---------------------------------+

+---------------------------------+ +---------------------------------+
| 残りのテキストはこちらです。
| ...                             
| ...                             | 残りの文章です。
| ...                             | | ...                             |
+---------------------------------+ +---------------------------------+

解決方法は？

私も同じような問題がありました。 私は、アンカー要素に、トップバーの高さをpadding-topの値とするクラスを追加することでそれを解決しました。

<h1><a class="anchor" name="barlink">Bar</a></h1>

このCSSを使いました。

.anchor { padding-top: 90px; }