Next.js 的 next/link 默认不触发 CSS scroll-behavior: smooth，需通过添加 !important 强制启用 HTML 根元素的平滑滚动行为，同时确保锚点跳转逻辑正确。
next.js 的 `next/link` 默认不触发 css `scroll-behavior: smooth`，需通过添加 `!important` 强制启用 html 根元素的平滑滚动行为，同时确保锚点跳转逻辑正确。
在 Next.js 应用中使用 组件进行页面内锚点跳转（如 href="#section1"）时，即使已全局设置 html { scroll-behavior: smooth; }，滚动仍可能表现为“瞬时跳转”而非平滑动画。这是因为 Next.js 的客户端路由切换会绕过原生导航流程，且部分浏览器（尤其是 Chrome 及其内核）对 scroll-behavior 的继承与优先级处理较为严格——当存在更高权重的样式（如框架注入、CSS-in-JS 重置或用户代理样式覆盖）时，该声明可能被忽略。
✅ 正确解决方案是增强 CSS 声明的特异性与优先级：
/* styles/globals.css 或 _app.tsx 中引入的全局样式 */
html {
scroll-behavior: smooth !important;
}⚠️ 注意事项：
- !important 在此处是必要且安全的：它仅作用于根滚动容器（），不影响其他样式逻辑；
- 确保该样式在所有页面加载前即生效（推荐置于 _app.tsx 引入的全局 CSS 文件中）；
- next/link 必须指向当前页内的 ID 锚点（如 href="#contact"），且目标元素需存在对应 id 属性（如 ...）；
- 不要混用 onClick 中手动调用 window.scrollTo() —— 这会与原生平滑滚动冲突，导致行为不可预测；
- 若使用 legacyBehavior + ，请移除 passHref（Next.js 13.4+ 已弃用 passHref 于 legacyBehavior 场景），并确保 标签无 href 冗余属性（由 Link 自动注入）。
? 示例优化后的导航代码（Next.js 13.4+ 推荐写法）：
// components/Navbar.tsx
{navItems.map((item, index) => (
<Link
key={index}
href={item.href} // e.g., "/#features" or "#pricing"
scroll={true} // 显式启用滚动（Next.js 13.4+ 默认 true，但显式声明更清晰）
className="w-full px-4 py-4 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-gradient focus:text-gradient focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none dark:focus:bg-neutral-700"
aria-label="Navigate to section"
onClick={handleOpen}
>
{item.name}
</Link>
))}? 补充说明：
- scroll={true} 是 Next.js 提供的原生支持选项（默认启用），它确保在导航完成后自动执行平滑滚动到目标锚点；
- 若链接跨页（如 /about#team），Next.js 会在页面加载完成后自动滚动，无需额外处理；
- 如遇 Safari 兼容性问题（少数版本不支持 scroll-behavior），可搭配轻量 polyfill（如 smoothscroll-polyfill），但现代 Safari（v15.4+）已原生支持。
总结：平滑滚动失效的根本原因不是 next/link 的缺陷，而是 CSS 优先级未达预期。一行 !important 即可可靠解决，简洁、高效、符合 Next.js 官方推荐实践。
