Hier ist eine Zwei-Sekunden-Zusammenfassung. Wenn ein Element eine ID hat, können Sie mit dem natürlichen Verhalten des Browsers darauf verlinken. Das ist großartig, wenn Überschriften IDs haben, da es oft nützlich ist, direkt zu einem bestimmten Inhaltsabschnitt zu verlinken.

<h3 id="step-2">Step 2</a>

Wenn ich dazu geneigt wäre, könnte ich direkt zu dieser Überschrift verlinken, sei es von einer URL wie https://meine-website.com/#schritt-2 oder einem Link auf der Seite wie

<a href="#step-2">Jump to Step 2</a>

Es ist also ideal, wenn alle Überschriften eindeutige IDs haben.

Ich finde es jedoch viel zu viel Arbeit, meinen Überschriften manuell IDs hinzuzufügen. Jahrelang habe ich es auf dieser Seite mit jQuery so gemacht (verklagen Sie mich)

// Adjust this for targetting the headers important to have IDs
const $headers = $(".article-content > h3");

$headers.each((i, el) => {
  const $el = $(el);

  // Probably a flexbox layout style page
  if ($el.has("a").length != 0) {
    return;
  }

  let idToLink = "";

  if ($el.attr("id") === undefined) {
    // give it ID
    idToLink = "article-header-id-" + i;
    $el.attr("id", idToLink);
  } else {
    // already has ID
    idToLink = $el.attr("id");
  }

  const $headerLink = $("<a />", {
    html: "#",
    class: "article-headline-link",
    href: "#" + idToLink
  });

  $el.addClass("has-header-link").prepend($headerLink);
});

Dieses Skript geht einen Schritt weiter als nur das Hinzufügen von IDs (wenn noch keine vorhanden ist), indem es einen #-Link direkt in die Überschrift einfügt, der auf diese Überschrift verlinkt. Der Sinn dahinter ist zu demonstrieren, dass die Überschriften IDs *haben* und macht es einfach, Dinge wie Rechtsklick-Kopieren-Link zu tun. Hier ist die Demo, wenn Sie sie sehen möchten.

Problem! Plötzlich funktionierte das nicht mehr.

Nicht das Skript selbst, das funktioniert einwandfrei. Aber das native Browserverhalten, das es dem Browser ermöglicht, beim Laden der Seite zur Überschrift zu springen, ist kaputt. Ich stelle mir das als ein Race Condition vor

1. Der HTML-Code kommt an
2. Die Seite beginnt mit dem Rendern
3. Der Browser sucht nach der ID in der URL, zu der er scrollen soll
4. Er findet sie nicht…
5. Oh, warte, da ist sie!
6. Scrolle dorthin.

Der Schritt *Oh, warte, da ist sie!* stammt aus der Ausführung des Skripts, das die ID der Überschrift hinzufügt. Ich mache den Browsern keinen Vorwurf, nicht zu dynamisch eingefügten Links zu springen. Ich bin überrascht, dass das so lange funktioniert hat.

Es ist viel besser, die IDs zu haben, sobald der HTML-Code ankommt. Diese Seite läuft mit WordPress, daher wusste ich, dass ich es mit einer Art Content-Filter machen könnte. Es stellt sich heraus, dass ich mich nicht einmal darum kümmern musste, denn dafür gibt es natürlich ein Plugin: Karolína Vyskočilovás Add Anchor Links. Funktioniert bei mir super. Seine Technik besteht darin, dass es die ID zum Ankerlink selbst hinzufügt, was auch völlig in Ordnung ist. Ich schätze, das ist eine weitere Möglichkeit, die bestehenden IDs nicht zu verändern.

Wenn ich kein WordPress hätte, hätte ich einen anderen Weg gefunden, den HTML-Code serverseitig zu verarbeiten, um sicherzustellen, dass irgendein Link zur Überschrift vorhanden ist. Es gibt immer einen Weg. Tatsächlich würde ich, wenn es zu seltsam oder umständlich wäre, es während des Build-Prozesses oder in einem serverseitigen Filter zu tun, in einem Service Worker danach suchen. Ich habe Spaß daran gehabt, mit Cloudflare's HTMLRewriter zu experimentieren, das dazu durchaus in der Lage ist.