デスクトップ版でアンカー付きのリンクをクリックすると、該当箇所にスクロールします。しかし、モバイル版(Android、Firefox、Chrome)ではURLからアンカーが削除されてしまうため、その箇所にスクロールしません。
やりたいこと:
見出しにリンクする必要がある、長いガイドラインとFAQ文書があります。Discourseはidパラメータを削除してしまうため、シンプルなテーマコンポーネントを作成しました。これはターゲット文書内のカスタムデータ属性を使用し、URL内のアンカーを監視して、一致するデータ属性を持つ要素までスクロールする仕組みです。
デスクトップ版では問題なく動作します!
しかし、モバイル版ではアンカーが削除されてしまうようで、ターゲットページに到達した時点で正しい要素までスクロールしません。もちろん、長い文書の場合、モバイル版こそそのようなナビゲーションが最も必要です。
なお、目次コンポーネントが生成するアンカーは、新しいリンクで開いた際には動作します。URLから削除されず、ブラウザは正しい場所にスクロールします。
これを動作させるにはどうすればよいでしょうか?
(愚痴:HTMLの最も基本的かつ根本的な機能であるアンカーの設置とリンクという、極めてシンプルなことを行うのに、本当に頭を悩ませさせられました。投稿がユーザー生成コンテンツであるため、セキュリティ上の懸念があることは理解しています。しかし、悪用を防ぐために実装された対策は非常に粗く、非常に単純なことを非常に複雑にしています。とはいえ、私のサイトはこれまでハッキングされたことがないので、まあそれもあるでしょう。)