ページタイトルとページアンカーが重なる問題の解決策

Question

HTML ページの上部に固定され、高さが定義された非スクロール ヘッダーがある場合:

URL アンカー (#fragment 部分) を使用して、ブラウザをページ内の特定の位置までスクロールさせながら、固定要素の高さを考慮する方法はありますか? ヘルプJavaScript を使用せずに?

http://example.com/#bar

エラー (ただし一般的な動作): 正しい:
 ---------------------------------- ---------------- ------------------
| BAR/////////////////////// ヘッダー | /////////////////////// /// ヘッダー |
 ---------------------------------- ---------------- ------------------
| 残りのテキストはここにあります | | バー |
| ... | | |
| ... | | 残りのテキストはここにあります |
| ... | | ... |
 ---------------------------------- ---------------- ------------------

Answer 1

新しいクラスを設定できない、または設定したくない場合は、固定高さの :target# を ::before# に追加できます。 ## CSS の疑似要素。##疑似クラス: リーリー または、jQuery を使用して、

:target

: を基準にしてページをスクロールします。 リーリー

Answer 2

同じ問題に遭遇しました。 この問題は、アンカー要素にクラスを追加し、トップバーの高さをpadding-topの値として使用することで解決しました。

リーリー

次の CSS を使用しました:

リーリー