谷歌浏览器中URL中的HTML锚点无法工作

Question

我一直在为一个小问题苦恼：https://numa.co/about/#corporate-innovation。

这个URL链接在Chrome浏览器中不能跳转到正确的锚点，但在我们的开发环境中可以正常工作。唯一的区别是我们在生产环境中使用了Cloudflare和HTTPS，但我不清楚这会有什么影响。请帮我看看。

- Alb Dum

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - j08691

我的电脑上运行良好。 - Kaushal Suthar

@KaushalSuthar 在 Mac 上使用 Chrome？我和我的同事们都遇到了同样的问题。 - Alb Dum

Chrome on PC. Windows 7. - Kaushal Suthar

Answer 1

这是一个解决您问题的方法，可以在所有主要的浏览器中很好地工作。

将此JavaScript代码放置在包含锚点的页面的head部分。

<script>
window.onload = function() {
    if(window.location.hash) {
       elmnt = document.getElementById(window.location.hash.substring(1));
           elmnt.scrollIntoView(true);
    }
}
</script>

- Zbigniew Ledwoń

---

语法高亮已关闭。脚本标签不应该被省略吗？ - Peter Mortensen

看起来对我来说是高亮的。 - Zbigniew Ledwoń

Answer 2

您有两个具有相同的id="corporate-innovation"元素。浏览器将前往这些元素中的第一个。id必须唯一属于一个元素。查看规范。

- Jacob

---

关于“浏览器将转到这些元素中的第一个”：这不是实现相关的吗？ - Peter Mortensen

Answer 3

看起来对我来说名称为空。这需要与URL片段相同。看看我的检查器视图：http://imgur.com/yy2fjp4

您可能需要查看原始HTML，以查看语法是否有问题。图像上的检查器是Mac上的Chrome。

我会尝试更改HTML，使其更像这样：

<a name="corporate-innovation"></a>
<h3 style="color:#E50064">Corporate Innovation</h3>
<span style="color:#E50064"><p>NUMA helps corporates innovate in a different way by collaborating with an ecosystem of entrepreneurs and experts. We provide new methodology training, accelerated intrapreneurship projects, and create open innovation programs for large companies and public institutions.</p>
</span>

- Jamie Buttons Coulter

---

我只是把它作为一个测试，我回到了<h3 id="corporate-innovation"> ，因为如果你不需要锚点，这是常规的html5方式（https://dev59.com/BXRB5IYBdhLWcg3w3K8J）但实际上，在Mac上的Chrome上似乎有一些额外的事情发生，这应该非常简单。 - Alb Dum

是的，我也觉得它看起来有点像缺少了一个引号，Chrome 试图以某种方式进行补偿！ - Jamie Buttons Coulter