デスクトップでアンカー付きのリンクをクリックすると、その位置までスクロールします。しかし、モバイル（Android、FirefoxおよびChrome）では、URLからアンカーが削除されるため、その位置へのスクロールが行われません。
やりたいこと：
見出しにリンクする必要がある長いガイドラインとFAQドキュメントがあります。Discourseはidパラメータを削除するため、ターゲットドキュメントにカスタムデータ属性を使用し、URL内のアンカーを監視して一致するデータ属性を持つ要素までスクロールするシンプルテーマコンポーネントを作成しました。
デスクトップでは動作します！
しかし、モバイルではアンカーが削除されるため、ターゲットページに到達した際に正しい要素までスクロールされません。もちろん、長いドキュメントの場合、モバイルではこのナビゲーションが最も必要です。
現在、目次コンポーネントによって生成されたアンカーは、新しいリンクで開いたときに動作することを確認しています。URLから削除されず、ブラウザは正しい位置までスクロールします。
これを動作させるにはどうすればよいでしょうか？
小さな更新…
誰かが代わりにクエリパラメータを使うことを提案しました。モバイルではそれらが削除されないようです。しかし驚くべきことに、デスクトップでは削除されています。
以下は関連する投稿ですが、URLが削除されるという特定の問題には触れていません…
Androidは使っていないのでテストはできませんが、ヘッダーへのリンクはこれまで何度も使っており、iPhoneでは問題なく動作しています。なぜ単純に目的のヘッダーにリンクするのではなく、idアンカーを使っているのか気になります。
例えば、これは動作しますか？ Cloudflare R2の設定
アンカーリンクの実際の例を挙げていただけますか？ 何を達成しようとしているのか、誤解している可能性があります。
それは、そのようなヘッダーへのリンクが非常に壊れやすいからです。あなたが提示したリンクは次のようになります。
https://meta.discourse.org/t/-/148916#p-738234-cloudflare-r2-13
末尾の -13 を見てください？ これは、13番目の見出しであることを示しています。文書内でそれより前に新しい見出しが追加されると、このリンクは破綻します。もちろん、見出しのテキスト自体を変更した場合も同様です。
ここで言う「破綻」とは、対象文書の変更を指します。私の理解では、これらのアンカーはページ読み込み時に動的に生成されます。したがって、目次（TOC）プラグインを使用している場合、文書の変更は問題になりません。
私たちのユースケースでは、FAQへのリンクを貼ることが多いです。そのため、新しい質問や見出しが追加されることは珍しくありません。
ただし、Discourse はこれらのアンカーのパターンを検出し、許可しているという点で、あなたの指摘は正しいです。しかし、期待されるパターンと一致しない場合、アンカーは削除されます。
それらは単なる英数字のIDです。したがって、上記の例に対してアンカーを作成する場合、 cloudflare-r2 を使用すればよいでしょう。
このような方法はどうでしょうか？
<a name="cloudflare-r2"></a>
## Cloudflare R2 の設定
これにより、アンカーと見出しが分離され、URL の末尾に #cloudflare-r2 を追加してリンクを作成できます。
私のテストでは、Markdown クッカーが name 属性を削除します。これが私の最初の問題の根本原因です。
しかし、このトピックで提起している問題は、そのアンカーが機能するようになったとしても、モバイル環境では #cloudflare-r2 が削除されてしまうという点です。デスクトップ環境では削除されません。
ああ、わかりました。はい、リッチテキストエディターはそれらを削除するようですが、マークダウンエディターは削除しないようです… リッチエディターでは、HTMLを保持するためにdivでラップする必要があると思います。
<div><a name="x"></a></div>
試してみましたが、依然として除去されてしまいます。また、将来、誰かがMarkdownエディタを使わないとは限りません。
テストのために、上記のHTMLをリッチテキストエディタに貼り付けてみました。結果を見てみましょう…。
了解！両方の点で問題なく動作するようです！しかも両方のエディタで。
もう少しテストを行いたいと思います。特にモバイル環境での動作確認が必要です。引き続き作業を進め、結果を報告します。
ありがとうございます！