Wie kann man einen Ankerlink zum Springen zu einem bestimmten Teil einer Seite erstellen

Ein Ankerlink ist ein Link, der es den Benutzern ermöglicht, sich durch eine Webseite zu bewegen. Es hilft, leicht zu scrollen und zu überfliegen. Ein benannter Anker kann verwendet werden, um auf einen anderen Teil derselben Seite (z. B. schnelles Scrollen) oder auf einen bestimmten Abschnitt einer anderen Seite zu verweisen.

Lassen Sie uns sehen, wie man zu einem markierten Abschnitt der Seite springt, indem man das Tag <a> verwendet. Es ist ganz einfach!

  1. Fügen Sie ein Attribut id zu Ihrem Ankerelement hinzu, um dem Abschnitt der Seite einen Namen zu geben. Der Wert des Attributs kann ein Wort oder eine Phrase sein (wenn Sie Phrasen verwenden, denken Sie daran, keine Leerzeichen zu haben, verwenden Sie stattdessen Unterstriche).
<a id="anchor-name">Der Abschnittsname hier, wo Sie springen möchten</a>

Alternativ können Sie auch folgende Arten von Ankern verwenden:

  1. Anker in einem Titel: <h2 id="anchor-name">Abschnittsname</h2>
  2. Anker in einem Bild: <img id="anchor-name" src="/images/imgname.jpeg"/>
  3. Anker in einem Absatz: <p id="anchor-name">Absatzname</p>
Jedes Attribut id kann auf einer Seite nur einmal erscheinen.
  1. Erstellen Sie einen Hyperlink mit dem Attribut id des Linkziels, vor dem ein Zeichen # steht.
<a href="#anchor-name">Springen Sie zu dem Teil der Seite mit “anchor-name”</a>

Jetzt bist du bereit! Fügen Sie einfach den gewünschten Text hinzu und Sie können durch die Seitenabschnitte blättern.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .main-content {
      height: 100vh;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <p class="main-content">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist ein Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker die Kombüse vom Typ nahm und sie zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, und ist im Wesentlichen unverändert geblieben. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum populär.</p> 
<p>Es ist eine seit langem bekannte Tatsache, dass ein Leser beim Betrachten des Layouts durch den lesbaren Inhalt einer Seite abgelenkt wird. Der Punkt bei der Verwendung von Lorem Ipsum ist, dass es eine mehr oder weniger normale Verteilung von Buchstaben hat, im Gegensatz zur Verwendung von 'Content hier, Content hier', was es wie lesbares Englisch aussehen lässt.</p>
    <p>Nach <a href="#Lorem_Ipsum">oben</a> gehen.</p>
  </body>
</html>

Es ist auch möglich, dem Anker, wo man springt, ein zusätzliches Styling zu geben. Fügen Sie dazu ein Tag <style> im Element <head> hinzu und geben Sie dem zu springenden Abschnitt ein Styling mit den Eigenschaften color und background.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .main-content {
      height: 100vh;
      text-align: justify;
      }	
      h2 {
      color: #1c87c9;
      }
      h2:target {
      color: white;
      background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <div  class="main-content ">
      <p class="main-content">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist ein Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker die Kombüse vom Typ nahm und sie zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, und ist im Wesentlichen unverändert geblieben. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum populär.</p> 
<p>Es ist eine seit langem bekannte Tatsache, dass ein Leser beim Betrachten des Layouts durch den lesbaren Inhalt einer Seite abgelenkt wird. Der Punkt bei der Verwendung von Lorem Ipsum ist, dass es eine mehr oder weniger normale Verteilung von Buchstaben hat, im Gegensatz zur Verwendung von 'Content hier, Content hier', was es wie lesbares Englisch aussehen lässt.</p>
    </div>
    <p>Nach <a href="#Lorem_Ipsum">oben</a> gehen.</p>
  </body>
</html>

Sie können auch von anderen Webseiten aus auf Ihren Ankerlink verweisen. Dazu fügen Sie die URL gefolgt von # und dem Ankerwert hinzu. Das können Sie in zwei Weisen machen:

<a href="/html-lernen/html-links.html#html_links">Gehen Sie zu den HTML-Links auf unserer Website.</a>
<a href="https://en.wikipedia.org/wiki/Main_Page#wikipedia">Zur Hauptseite von Wikipedia gehen.</a>

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist ein Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker die Kombüse vom Typ nahm und sie zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, und ist im Wesentlichen unverändert geblieben. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum populär.</p>
    <p><a href="/html-lernen/html-links.html#html_links">Zur Seite HTML-Links auf unserer Webseite gehen.</a></p>
    <p><a href="https://en.wikipedia.org/wiki/Main_Page#wikipedia">Zur Hauptseite von Wikipedia gehen.</a></p>
  </body>
</html>