☰

ページヘッダーがページ内アンカーと重なる問題を修正しました。質問する

tag-icon • tag-icon html url anchor
ページヘッダーがページ内アンカーと重なる問題を修正しました。質問する

HTML ページに、定義済みの高さを持ち、上部に固定されたスクロールしないヘッダーがある場合:

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

http://example.com/#bar

間違い（ただし一般的な動作です）: 正解:
+---------------------------------+ +---------------------------------+
| BAR////////////////////// ヘッダー | | ////////////////////////// ヘッダー |
+---------------------------------+ +---------------------------------+
| 残りのテキストはこちらです | | BAR |
| ... | | |
| ... | | 残りのテキストは次のとおりです |
| ... | ... |
+---------------------------------+ +---------------------------------+

ベストアンサー1

新しいクラスを設定できない場合、または設定したくない場合は、固定高さのクラスを追加します。::before疑似要素を:targetCSS の疑似クラス:

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

:targetまたは、 jQuery を使用してページを相対的にスクロールします。

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);

おすすめ記事