Wenn ich auf dem Desktop auf einen Link mit einem Anker klicke, wird zu dieser Stelle gescrollt. Auf mobilen Geräten (Android, FF & Chrome) wird der Anker jedoch aus der URL entfernt, sodass kein Scrollen zu dieser Stelle stattfindet.
Was ich erreichen möchte:
Wir haben ein langes Leitfaden- und FAQ-Dokument, das auf Überschriften verlinken muss. Da Discourse id-Parameter entfernt, habe ich eine einfache Theme-Komponente erstellt, die benutzerdefinierte Datenattribute im Zieldokument verwendet und auf Anker in der URL hört, um zum Element mit dem passenden Datenattribut zu scrollen.
Es funktioniert auf dem Desktop!
Auf mobilen Geräten werden die Anker jedoch scheinbar entfernt, sodass beim Aufruf der Zielseite nicht zum richtigen Element gescrollt wird. Und natürlich ist Mobile genau dort, wo man diese Navigation am dringendsten benötigt, wenn man mit langen Dokumenten arbeitet.
Ich habe festgestellt, dass die von der Inhaltsverzeichnis-Komponente generierten Anker funktionieren, wenn man sie in einem neuen Tab öffnet. Sie werden nicht aus der URL entfernt und der Browser scrollt an die richtige Stelle.
Wie kann ich dies zum Laufen bringen?
(Rant: Es war wirklich frustrierend, etwas so Grundlegendes und Fundamentales von HTML zu versuchen, nämlich Anker zu verwenden und darauf zu verlinken. Ich verstehe, dass es aufgrund von benutzergenerierten Inhalten Sicherheitsprobleme gibt. Aber es fühlt sich so an, als wären die Lösungen, die zur Abwehr von Missbrauch implementiert wurden, sehr stumpf und machen etwas sehr Einfaches sehr kompliziert. Das gesagt, meine Seite wurde noch nie gehackt, also ist das wohl etwas Positives.)