Wie schafft man Platz über einem Ankerlink?

Anpassen der Position des Ankerlinks auf der Seite

Wenn Benutzer über einen Ankerlink auf einen Seitenabschnitt zugreifen, erwarten sie normalerweise, dass dieser sie zum verlinkten Abschnitt führt Bereich oben auf der Seite. In bestimmten Szenarien kann es jedoch wünschenswert sein, etwas vertikalen Abstand über dem verknüpften Element beizubehalten.

Um dies zu erreichen, liegt die Lösung in der Eigenschaft scroll-margin-top, die den Abstand (in) angibt Pixel), die zwischen dem verknüpften Element und dem oberen Rand der Seite beibehalten werden sollen, nachdem auf den Ankerlink geklickt wurde.

Beispielcode:

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

In diesem Beispiel wird das #anchor-Element verwendet 100 Pixel unter dem oberen Rand der Seite positioniert werden, nachdem der entsprechende Ankerlink aktiviert wurde.

Es ist wichtig zu beachten, dass die scroll-margin-top-Eigenschaft in allen modernen Browsern unterstützt wird und ein zuverlässiges Verhalten auf verschiedenen Plattformen gewährleistet.

Das obige ist der detaillierte Inhalt vonWie schafft man Platz über einem Ankerlink?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!