Wie versetze ich Ankerlinks vom oberen Rand des Ansichtsfensters?

Ankerlink mit Versatz von oben

Beim Navigieren auf einer Webseite über Ankerlinks landet der Zielabschnitt oft direkt oben im Ansichtsfenster . Um etwas Luft zum Atmen zu schaffen, ist es wünschenswert, den verknüpften Bereich leicht vom Seitenrand zu versetzen.

Lösung

Die Eigenschaft scroll-margin-top bietet eine unkomplizierte Lösung. Indem Sie dieser Eigenschaft für den Anker einen Wert hinzufügen, können Sie eine Lücke zwischen seiner verknüpften Position und dem oberen Rand der Seite erstellen. Zum Beispiel:

<code class="css">#anchor {
  scroll-margin-top: 100px;
}</code>

Dieser Code verschiebt den Zielabschnitt um 100 Pixel nach unten, wenn über den Ankerlink navigiert wird.

Kompatibilität

Glücklicherweise wird diese Lösung von modernen Browsern, darunter Chrome, Firefox, Safari und Edge, weitgehend unterstützt. Die Kompatibilität mit älteren Browsern wie dem Internet Explorer ist jedoch eingeschränkt.

Das obige ist der detaillierte Inhalt vonWie versetze ich Ankerlinks vom oberen Rand des Ansichtsfensters?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!