Wenn ich auf einem Desktop auf einen Link mit einem Anker klicke, wird zu diesem 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 Verweise auf Überschriften enthalten 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.
Auf dem Desktop funktioniert es!
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 es auf mobilen Geräten bei langen Dokumenten am wichtigsten, dass diese Navigation funktioniert.
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.
Jemand hat vorgeschlagen, stattdessen Abfrageparameter zu verwenden. Diese werden auf Mobilgeräten scheinbar nicht entfernt. Aber erstaunlicherweise werden sie auf dem Desktop entfernt.
Ich benutze kein Android, also kann ich das nicht testen, aber ich habe Header-Links schon oft verwendet und sie funktionieren auf meinem iPhone einwandfrei. Ich frage mich, warum du ID-Anker verwendest, anstatt einfach zu dem gewünschten Header zu verlinken?
Siehst du das -13 am Ende? Es ist dort, weil es die dreizehnte Überschrift ist. Sobald du eine neue Überschrift weiter oben im Dokument einfügst, funktioniert der Link nicht mehr. Und natürlich funktioniert er auch nicht mehr, wenn du den Text der Überschrift änderst.
Wenn ich sage, dass er nicht mehr funktioniert, meine ich Änderungen im Zieldokument. Soweit ich das beurteilen kann, werden diese Anker dynamisch generiert, wenn die Seite geladen wird. Wenn du also das Inhaltsverzeichnis-Plugin (TOC) verwendest, ist das Ändern des Dokumentes kein Problem.
In unserem Anwendungsfall wird auf eine FAQ verlinkt. Daher ist es nicht unüblich, neue Fragen/Überschriften hinzuzufügen.
Aber du hast recht, dass Discourse das Muster dieser Anker zu erkennen scheint und sie durchlässt. Wenn das Muster jedoch nicht dem erwarteten entspricht, wird es entfernt.
Es sind einfach normale alphanumerische IDs. Wenn ich also versuchen würde, einen Anker für dein obiges Beispiel zu erstellen, würde ich einfach cloudflare-r2 verwenden.