Next.js单页站点导航锚点跳转至政策页异常问题求助

问题根源 #

纯HTML的锚点链接（如<a href="#Home">）是相对当前页面的，在/Policy页面点击时，浏览器只会尝试在当前页面内定位#Home元素，不会自动跳转到首页后再定位锚点。

快速解决方案 #

直接修改锚点链接为绝对路径，在锚点前加上首页的根路径：

<a href="/#Home">Home</a>
<a href="/#About">About</a>
<!-- 其他菜单项同理 -->

这样无论在哪个页面点击，都会先跳转到首页（/），再自动滚动到对应的锚点区块。

是否改用Next.js Link组件或动态路由？ #

关于Link组件：非常推荐 #

Next.js的Link组件是专为单页应用的客户端路由设计的，相比纯<a>标签有两个核心优势：

• 不会触发整页刷新，跳转更顺滑，提升用户体验
• 对锚点滚动的支持更稳定，配合scroll参数可以精准控制滚动行为

使用示例：

import Link from 'next/link';

// 菜单中的Home项
<Link href="/#Home">
  <a>Home</a>
</Link>

// 显式声明强制滚动到锚点（默认已开启）
<Link href="/#Home" scroll={true}>
  <a>Home</a>
</Link>

关于[id]动态路由：完全没必要 #

你的场景是首页内的固定锚点区块，并非需要根据参数动态生成的页面（比如博客文章、商品详情页）。动态路由适用于批量生成结构一致但内容不同的页面，对你的需求来说完全是冗余设计，不需要使用。

额外注意事项 #

确保首页的各个区块都设置了正确的id属性，比如：

<div id="Home">
  {/* Home区块内容 */}
</div>
<div id="About">
  {/* About区块内容 */}
</div>

内容的提问来源于stack exchange，提问作者Ramo Agency