Codebeispiel zum Erreichen des internen Ankerpunkts einer Webseite durch reines CSS beim Auf- und Ab-Offset

Als ich kürzlich an meiner Website „Fußball-Navigation“ arbeitete, stieß ich auf die Anforderung, den internen Anker einer Webseite nach dem Springen etwas nach unten zu verschieben, damit er nicht von der oberen festen Navigationsleiste verdeckt wird.

Ich habe online nach einigen Methoden gesucht und die meisten verwendeten JS, um den Sprung zu steuern. Später fand ich auf dem persönlichen Blog eines ausländischen Entwicklers eine Methode, die nur mit CSS implementiert war. Ich fand sie sehr einfach und habe seine Implementierungsmethode übernommen. Normalerweise wird der Stil der festen Navigationsleiste oben auf unserer Webseite wie folgt implementiert:

<div Klasse="header" style="position: fest; oben: 0;"></div>

Anschließend wird eine Liste mit Links angezeigt, zu denen Sie springen können:

<ul>
  <li><a href="#section1">Ankertext</a></li>
  <li><a href="#section2">Ankertext</a></li>
</ul>

Voraussetzung ist, dass sich die Seite bei jedem Anklicken eines der oben stehenden Links an der Ankerposition der entsprechenden ID befindet:

<div Klasse="Abschnitt" id="Abschnitt1"></div>
<div Klasse="Abschnitt" id="Abschnitt2"></div>

Wenn sich jedoch oben ein Div mit der Position „position:fixed“ befindet, wird beim Positionieren auf diesen Ankerpunkt der obere Teil des Inhalts im Ankerpunkt durch das oben fixierte Div abgedeckt. Die Lösung besteht darin, bei jedem positionierten Inhalt einen leeren Seitenanker hinzuzufügen, die Seitenelement-ID, zu der gesprungen werden soll, auf dieses leere Element zu setzen und die CSS-Vertrautheit des leeren Elements festzulegen, um den Versatz beim Springen zu erreichen. Das leere Element, das wir definieren, ist das Div mit der Klasse „Anker“, und die ID des Div wird auf die ID gesetzt, zu der der obige Link springen soll:

<div Klasse = "Anker" id = "Abschnitt1"></div>
<div Klasse="Abschnitt"></div>
<div Klasse = "Anker" id = "Abschnitt2"></div>
<div Klasse="Abschnitt"></div>

Die CSS-Eigenschaften dieses leeren Elements sind wie folgt:

.Anker{
  Anzeige: Block;
  Höhe: 60px; /*gleiche Höhe wie oberer Fix*/
  margin-top: -60px; /*gleiche Höhe wie oberer Fix*/
  Sichtbarkeit: versteckt;
}

An diesem Punkt haben wir die gewünschte Funktion des internen Ankerpunktsprungs realisiert.

Kurz gesagt ist der Versatzwert hier die Höhe, die das leere Element beim Springen einnimmt. Dieses Platzhalterelement wird verwendet, um den Versatzeffekt zu erzielen, den wir benötigen, wenn der Ankerpunkt springt.

Damit ist dieser Artikel über die Einführung in den Beispielcode zum Erreichen des internen Ankerpunkt-Sprungs- und -Versatzes durch reines CSS abgeschlossen. Weitere CSS-Inhalte zum internen Ankerpunkt-Sprung- und -Versatz durch Auf- und Abwärtssuchen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie unterstützen 123WORDPRESS.COM auch in Zukunft!