Next.js导航栏点击跳转新页面问题：实现页面内滚动定位

问题原因 #

你当前的写法会触发新标签页跳转，是因为Next.js的Link组件在处理纯哈希路径时，默认行为不符合页面内滚动的预期，需要显式配置滚动相关属性或手动控制跳转逻辑。

解决方案 #

方案1：修改Link组件属性（最简方式） #

给每个Link添加scroll={true}和replace属性，强制启用页面内滚动并避免浏览器历史冗余记录：

<Link href="#About" scroll={true} replace>About</Link>
<Link href="#Sponsors" scroll={true} replace>Sponsors</Link>
<Link href="#FAQ" scroll={true} replace>FAQ</Link>

方案2：手动控制滚动逻辑（更灵活） #

如果需要自定义滚动行为（比如平滑滚动），可以用useRouter钩子手动处理：

1. 导入路由钩子（根据你的Next.js版本选择）

// App Router（Next.js 13+）
import { useRouter } from 'next/navigation';
// Pages Router（Next.js 12及以下）
import { useRouter } from 'next/router';

2. 编写滚动函数

const router = useRouter();

const scrollToSection = (sectionId) => {
  // 针对App Router
  router.push(`#${sectionId}`, { scroll: true });
  // 针对Pages Router，可替换为：
  // router.replace(`/#${sectionId}`);
};

3. 绑定到Link的点击事件

<Link onClick={() => scrollToSection('About')} href="#About">About</Link>
<Link onClick={() => scrollToSection('Sponsors')} href="#Sponsors">Sponsors</Link>
<Link onClick={() => scrollToSection('FAQ')} href="#FAQ">FAQ</Link>

关键注意事项 #

• 确保目标区块的根元素有正确的id，比如About组件的结构要像这样：

<section id="About">
  {/* 你的About组件内容 */}
</section>

• 如果需要平滑滚动效果，可以在全局CSS中添加：

html {
  scroll-behavior: smooth;
}

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