Dieses Ärgernis beschäftigt uns und einige unserer Kunden schon seit geraumer Zeit, in deren Verlauf wir natürlich auf diverse Lösungsversuche gestoßen sind. Sie reichen von benutzerdefinierten Handlern, die einen Teil der Schwierigkeiten gut in den Griff bekommen, hin zu Bibliotheken von Drittanbietern, die sich eines anderen Teils annehmen.

Letztendlich konnte keiner dieser Ansätze sämtliche typischen Anwendungsfälle abdecken:

Die Liste wird noch etwas länger, wenn man Randfälle berücksichtigt, etwa das erwartete Verhalten bei Verwendung der Vor- und Zurück-Buttons des Browsers oder bei einem erneuten Klick auf denselben In-page-Link. Außerdem hätten wir gerne etwas Unterstützung für Logik-Anpassungen gesehen, um bespielsweise weiches Scrollen zu ermöglichen oder auf einfachen Text verweisen zu können, wie es hier auf scrivito.com zu sehen ist.

Die Bibliotheken, die wir uns in der Hoffnung angesehen haben, dass sie die oben genannten Anforderungen erfüllen, machen ihre jeweilige Sache zwar gut, haben aber leider alle dieselbe Schwäche: sie decken längst nicht die ganzen Anwendungsfälle ab, die wir für uns ermittelt haben.

• react-hash-link hat einen guten Ansatz, mit dynamisch hinzugefügten Inhalten umzugehen: es erkennt DOM-Mutationen und behandelt zahlreiche Fälle, jedoch nicht alle unserigen. Ein Blick in den Code hat uns schnell erkennen lassen, dass die zugrunde liegende Logik relativ simpel ist und wir lieber unsere eigene Version entwickeln sollten, anstatt zu versuchen, diesen Code umzubauen.
• react-scroll ist sehr vielseitig, stützt sich aber auf React-Komponenten, wodurch sich die Komplexität der Anwendung erhöht. Diese Bibliothek wird in der Scrivito Example App verwendet, funktioniert allerdings nicht bei HTML-Inhalten, die im CMS gespeichert sind, wie etwa unsere interne API-Dokumentation.

Wir haben uns gern von diesen Lösungen inspirieren lassen, um dann unsere eigene zu entwickeln: