当我在桌面端点击带有锚点的链接时,页面会滚动到相应位置。然而在移动端(Android 上的 Firefox 和 Chrome)中,锚点会被从 URL 中移除,因此无法滚动到指定位置。
我想要实现的目标:
我们有一份较长的指南和常见问题解答文档,需要链接到各个标题。由于 Discourse 会移除 id 参数,我创建了一个简单的主题组件,该组件使用目标文档中的自定义数据属性,并监听 URL 中的锚点,以便滚动到具有匹配数据属性的元素。
它在桌面端可以正常工作!
然而在移动端,锚点似乎被移除了,因此当你到达目标页面时,不会滚动到正确的元素。当然,对于长文档来说,移动端是最需要这种导航功能的。
我发现,由目录组件生成的锚点在通过新链接打开时是有效的。它们不会从 URL 中被移除,浏览器也会滚动到正确的位置。
我该如何解决这个问题?
(吐槽:尝试实现 HTML 中如此基本且核心的功能——即使用锚点并链接到它们——真的令人沮丧。我意识到,由于帖子是用户生成的内容,因此存在安全问题。但感觉为了防止滥用而实施的解决方案过于粗暴,使得原本简单的操作变得非常复杂。话说回来,我的网站从未被黑客攻击过,所以这也许算是一件好事吧。)