ヘッダーとジャンプリンクを修正しましたか？ソリューションはスクロールマージントップです

イライラする問題に遭遇しましたか？ [Jump](#header-3)のようなジャンプリンクは、ヘッダー（例えば、 ### Header ）につながり、ページの上部に固定された位置ヘッダーによって不明瞭になります。この一般的な問題は、ターゲットヘッダーを隠したままにします。

以前は、この必要な扱いにくい回避策を解決しました。 CSS-Tricksでさえ、アーティクル内ヘッダーの寛大なパディングトップが最も簡単なソリューションでした。

幸いなことに、単純なCSSソリューションが存在します。

 H3 {
  スクロールマージントップ：5rem; / *ヘッダーをクリアするために必要に応じて '5rem'を調整します */
}

scroll-margin-topプロパティは、ヘッダーをエレガントに押し下げ、上に固定されたヘッダーがあっても目に見えるようにします。ブラウザのサポートは優れているため、これを実用的で広く互換性のあるソリューションにします。巻物のスナップと一緒によく議論されますが、この文脈でのその有用性は間違いなくさらに重要です。

簡単なデモンストレーションは、その有効性を示しています。

興味深いことに、Chromeの「テキストフラグメント」リンクは異なるアプローチを提供しながら、多くの場合、ユーザーをページの中央に配置し、この共通の問題に対する代替ソリューションを提供します。

以上がヘッダーとジャンプリンクを修正しましたか？ソリューションはスクロールマージントップですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。