时间戳

首页 > 解决方案 > 网页上的内部链接在 Chrome 中不起作用

html - 网页上的内部链接在 Chrome 中不起作用

问题描述

我在开发的其中一个页面上遇到了 Google Chrome 的问题。

<li><a href="#top">Start</a></li>
   <li><a href="assets/files/Resume.pdf">Resume</a></li>
   <li><a href="#testimonials">Testimonials</a></li>
   <li><a href="#dvcontact">Contact</a></li>

我无法让页面上的内部链接正常工作。该页面不会导航到推荐部分或联系部分。为什么这不起作用？

我尝试过的事情：

  1. 我尝试将 section 元素包裹在 div 周围，但这也不起作用。
  2. 我开始使用所有浏览器仍支持的#top 锚点开始工作。
  3. 我尝试使用 Edge 和 Firefox 浏览器，两者都适用。

该网站可在https://www.ashutoshysingh.com/在线获取。

注意：该问题专门发生在 Chrome 中。我已经使用 Windows 10 在 v65 和 v67 上进行了测试。

编辑- 4. 我也尝试过运行 W3C 验证器并验证了页面。

标签： htmlgoogle-chromehyperlink

解决方案

您似乎正在使用jQuery.localScroll插件动画滚动到哈希指向的元素，它可能会失败，因为在内部某处，它会嗅探浏览器并采用旧的顶级滚动算法（<body>滚动而不是<html>）。我建议您更新所有相关的插件/jQuery。

#top之所以起作用，是因为页面上没有这样的元素，所以 jQuery.localScroll 不会干扰并让浏览器做它做的事情。

Chrome 61 将顶级滚动机制切换为使用<html>，就像标准要求和其他浏览器已经遵循的一样。 https://www.chromestatus.com/feature/6386758136627200

（我验证它适用于 Chrome 60）

您可以阅读通过更新网站所依赖的编码错误的库来解决的类似案例之一 - https://groups.google.com/a/chromium.org/d/msg/chromium-discuss/0j4ewHdP2Gk /Dut0CbPMAQAJ

推荐阅读