☰

固定ヘッダーに合わせて HTML アンカーをオフセットする [重複] 質問する

tag-icon • tag-icon javascript html css anchor offset
固定ヘッダーに合わせて HTML アンカーをオフセットする [重複] 質問する

アンカーの動作を整理しようとしています。ページの上部に固定されたヘッダーがあるため、ページ内の他の場所にあるアンカーにリンクすると、ページがジャンプしてアンカーがページの上部に表示され、コンテンツが固定ヘッダーの後ろに残ります (意味が通じるといいのですが)。アンカーをヘッダーの高さから 25 ピクセルオフセットする方法が必要です。HTML または CSS が望ましいですが、Javascript でもかまいません。

ベストアンサー1

JavaScript を使わずに CSS だけを使用することもできます。

アンカーにクラスを与えます:

<a class="anchor" id="top"></a>

アンカーをブロック要素にして相対的に配置することで、アンカーをページ上の実際の位置よりもオフセット高くまたは低く配置することができます。-250pxはアンカーを250px上に配置します。

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

おすすめ記事