Next.js 13.4中Link组件锚点跳转失效问题求助

问题原因 #

Next.js 13 App Router 中的 Link 组件，默认的客户端导航逻辑不会触发同一页面内的原生锚点滚动行为，导致点击按钮后无跳转反应；而手动在地址栏输入锚点 URL 时，是由浏览器直接处理锚点定位，因此可以正常跳转。

解决方案 #

方案1：使用原生 <a> 标签替代 Next.js Link #

同一页面内的锚点跳转不需要依赖客户端路由功能，直接用原生 <a> 标签即可解决问题：

// 修改 Hero 组件中的按钮容器代码
<div className='pt-5'>
  <a href='#about'>
    <button className='heroButton'>About</button>
  </a>
  <a href='#experience'>
    <button className='heroButton'>Experience</button>
  </a>
  <a href='#skills'>
    <button className='heroButton'>Skills</button>
  </a>
  <a href='#projects'>
    <button className='heroButton'>Projects</button>
  </a>
</div>

方案2：保留 Next.js Link 并手动处理滚动 #

如果需要保留 Link 组件（比如后续有扩展路由的需求），可以通过 onClick 事件手动触发锚点滚动：

// Hero 组件中修改 Link 部分代码
<div className='pt-5'>
  <Link 
    href="#about" 
    onClick={(e) => {
      e.preventDefault();
      const targetElement = document.getElementById('about');
      targetElement?.scrollIntoView({ behavior: 'smooth' });
    }}
  >
    <button className='heroButton'>About</button>
  </Link>
  <Link 
    href="#experience" 
    onClick={(e) => {
      e.preventDefault();
      const targetElement = document.getElementById('experience');
      targetElement?.scrollIntoView({ behavior: 'smooth' });
    }}
  >
    <button className='heroButton'>Experience</button>
  </Link>
  {/* Skills、Projects 按钮同理处理 */}
</div>

额外验证点 #

• 确认目标 <section> 的 id 属性与跳转链接的 href 完全匹配（你的代码中 #about 对应 <section id='about'>，匹配逻辑正确）
• 父容器的 snap-y snap-mandatory 样式与锚点滚动不冲突，手动输入 URL 能正常跳转已验证这一点

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