Heim > Web-Frontend > CSS-Tutorial > Wie versetze ich Ankerlinks vom oberen Rand des Ansichtsfensters?

Wie versetze ich Ankerlinks vom oberen Rand des Ansichtsfensters?

Patricia Arquette
Freigeben: 2024-11-06 09:05:02
Original
479 Leute haben es durchsucht

How to Offset Anchor Links from the Top of the Viewport?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage