Wie füge ich vor einem Ankerlink vertikalen Abstand hinzu?

Ankerlinks mit Pixelversatz positionieren

Bei der Verwendung von Ankerlinks kommt es häufig vor, dass der verlinkte Abschnitt ganz oben angezeigt wird die Seite beim Klicken. Dieses Problem tritt in Szenarien auf, in denen etwas vertikaler Platz vor dem verlinkten Abschnitt gewünscht wird.

Glücklicherweise kann die Eigenschaft „scroll-margin-top“ verwendet werden, um diesen Bedarf zu decken. So geht's:

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

Weisen Sie die Eigenschaft „scroll-margin-top“ mit dem gewünschten Pixelwert dem Element zu, das den Ankerlink erhält. In diesem Fall ist das Ankertag an ein Element mit der ID „Anker“ gebunden. Durch die Einstellung von „scroll-margin-top“ auf 100 Pixel wird sichergestellt, dass durch Klicken auf den Ankerlink zum „Anker“-Element mit 100 Pixel vertikalem Abstand vom oberen Rand der Seite navigiert wird.

Dies ist ein Browser -unterstützte Lösung, die eine kompatible Möglichkeit zur Steuerung des vertikalen Versatzes von Ankerverbindungen bietet.

Das obige ist der detaillierte Inhalt vonWie füge ich vor einem Ankerlink vertikalen Abstand hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!