HTML同页面导航菜单锚点链接跳转失效解决方法

错误原因 #

你写的<a href="#about.html">About</a>无法正常跳转，核心问题是同页面锚点的#后只需要匹配目标元素的ID，不需要带.html后缀——这种写法会被浏览器识别为跳转到独立文件about.html的对应锚点，自然找不到当前页面的内容区块。

正确实现步骤 #

• 给需要跳转到达的正文目标区块设置唯一的id属性，示例：

<!-- 目标正文区块 -->
<div id="about">
  <h2>About</h2>
  <p>这里是About板块的所有正文内容</p>
</div>

• 修改导航链接的href属性，值为#拼接目标区块的id，不要加任何文件后缀，正确代码：

<a href="#about">About</a>

效果优化 #

如果想要点击链接后平滑滚动到对应区块，而非瞬间跳转，可以在页面CSS中添加如下规则：

html {
  scroll-behavior: smooth;
}

注意：单个HTML页面内所有元素的id值不能重复，否则锚点会默认跳转到第一个匹配对应id的元素位置，出现跳转错位的问题。

内容的提问来源于stack exchange，提问作者rukunga ephantus