モバイルでURLからハッシュ/アンカーが削除されます。これを防ぐには？

サポート
1

デスクトップでアンカー付きのリンクをクリックすると、その位置までスクロールします。しかし、モバイル（Android、FirefoxおよびChrome）では、URLからアンカーが削除されてしまうため、その位置までスクロールされません。

やりたいこと：

見出しにリンクする必要がある長いガイドラインとFAQドキュメントがあります。Discourseはidパラメータを削除してしまうため、ターゲットドキュメントにカスタムデータ属性を使用し、URL内のアンカーを監視して一致するデータ属性を持つ要素までスクロールするシンプルなテーマコンポーネントを作成しました。

デスクトップでは正常に動作します！

しかし、モバイルではアンカーが削除されてしまうため、ターゲットページに到達したときに正しい要素までスクロールされません。もちろん、長いドキュメントではモバイルでこのナビゲーションが最も必要です。

また、目次コンポーネントによって生成されたアンカーは、新しいリンクで開いたときに動作することを見つけました。URLから削除されず、ブラウザが正しい位置までスクロールします。

これをどのように動作させることができますか？

2

小さな更新…

誰かが代わりにクエリパラメータを使うことを提案しました。モバイルではそれらが削除されないようです。しかし驚くべきことに、デスクトップでは削除されています。

3

以下は関連する投稿ですが、URLが削除されるという特定の問題には触れていません…

4

Androidは使っていないのでテストはできませんが、ヘッダーへのリンクはこれまで何度も使っており、iPhoneでは問題なく動作しています。なぜ単純に目的のヘッダーにリンクするのではなく、idアンカーを使っているのか気になります。

例えば、これは動作しますか？ Cloudflare R2の設定

アンカーリンクの実際の例を挙げていただけますか？ 何を達成しようとしているのか、誤解している可能性があります。

5

それは、そのようなヘッダーへのリンクが非常に壊れやすいからです。あなたが提示したリンクは次のようになります。

https://meta.discourse.org/t/-/148916#p-738234-cloudflare-r2-13

末尾の -13 を見てください？ これは、13番目の見出しであることを示しています。文書内でそれより前に新しい見出しが追加されると、このリンクは破綻します。もちろん、見出しのテキスト自体を変更した場合も同様です。

ここで言う「破綻」とは、対象文書の変更を指します。私の理解では、これらのアンカーはページ読み込み時に動的に生成されます。したがって、目次（TOC）プラグインを使用している場合、文書の変更は問題になりません。

私たちのユースケースでは、FAQへのリンクを貼ることが多いです。そのため、新しい質問や見出しが追加されることは珍しくありません。

ただし、Discourse はこれらのアンカーのパターンを検出し、許可しているという点で、あなたの指摘は正しいです。しかし、期待されるパターンと一致しない場合、アンカーは削除されます。

それらは単なる英数字のIDです。したがって、上記の例に対してアンカーを作成する場合、 cloudflare-r2 を使用すればよいでしょう。