Quando clico em um link com âncora no desktop, a página rola até o ponto correspondente. No entanto, no mobile (Android, FF e Chrome), a âncora é removida da URL, então não há rolagem até aquele ponto.
O que estou tentando fazer:
Temos um documento longo de diretrizes e FAQ que precisa fazer links para os títulos. Como o Discourse remove os parâmetros id, criei um componente de tema simples que usa atributos de dados personalizados no documento de destino e monitora as âncoras na URL para rolar até o elemento com o atributo de dados correspondente.
Funciona no desktop!
No entanto, no mobile, as âncoras parecem ser removidas, de modo que, ao chegar na página de destino, não há rolagem até o elemento correto. E, claro, com um documento longo, é no mobile que você mais precisa dessa navegação.
Agora, percebi que as âncoras geradas pelo componente Índice funcionam* quando abertas em uma nova aba. Elas não são removidas da URL e o navegador rola até o local correto.
Eu não uso Android, então não posso testar isso, mas já usei links para cabeçalhos muitas vezes e eles funcionam perfeitamente no meu iPhone. Estou curioso para saber por que você está usando âncoras de ID em vez de apenas linkar para o cabeçalho desejado?
Veja aquele -13 no final? Ele está lá porque é o décimo terceiro cabeçalho. Assim que você adicionar um novo cabeçalho mais cedo no documento, ele quebra. E, claro, se você alterar o texto do cabeçalho, ele quebra.
Quando digo “quebra”, quero dizer mudanças no documento de destino. Pelo que posso ver, esses âncoras são gerados dinamicamente quando a página é carregada. Então, se você estiver usando o plugin de índice (TOC), alterar o documento não é um problema.
No nosso caso de uso, este é um FAQ sendo vinculado. Portanto, não é incomum adicionar novas perguntas/cabeçalhos.
Mas você está correto ao afirmar que o Discourse parece detectar o padrão dessas âncoras e permite que passem. Mas se não corresponder ao padrão esperado, ele é removido.
São apenas IDs alfanuméricos comuns. Então, se eu estivesse tentando criar uma âncora para o seu exemplo acima, eu usaria apenas cloudflare-r2.
Em meus testes, o processador de Markdown remove os atributos name. Essa é a raiz do meu primeiro problema.
No entanto, a questão que estou levantando neste tópico é que, mesmo que eu conseguisse fazer esse âncora funcionar, em dispositivos móveis o #cloudflare-r2 é removido. Isso não acontece no desktop.
Ah, entendi. Parece que o editor de texto rico remove essas tags, mas o editor de Markdown não… No editor rico, acho que você teria que envolvê-lo em um div para preservar o HTML.
Já tentei isso. Ainda assim, o código é removido durante a renderização. Além disso, não posso contar com o fato de que ninguém no futuro vá usar o editor Markdown.
Coloquei esse HTML acima no editor de texto rico para testar. Vamos ver…