next/Link平滑滚动失效求助：锚标签可用但会重载页面

问题核心在于：Next.js的Link组件会拦截原生a标签的默认跳转行为，采用客户端导航模式，这导致scroll-behavior: smooth的CSS规则无法触发。原生a标签能生效是因为它会触发完整的页面重载+锚点滚动，但代价是页面刷新。

以下是两种针对性的解决方案：

方案一：适配使用legacyBehavior的Pages Router/旧版App Router #

通过手动拦截点击事件，先完成客户端导航，再触发平滑滚动：

1. 引入useRouter并定义处理函数

import { useRouter } from 'next/router';

const YourComponent = () => {
  const router = useRouter();

  const handleNavClick = async (e, href) => {
    e.preventDefault(); // 阻止原生a标签跳转
    // 执行客户端导航
    await router.push(href);
    // 处理锚点平滑滚动
    if (href.includes('#')) {
      const targetId = href.split('#')[1];
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
    handleOpen(); // 保留原菜单关闭逻辑
  };

  // ... 其余组件代码
};

2. 修改Link组件的点击事件绑定

{navItems.map((item, index) => (
  <Link key={index} href={item.href} passHref legacyBehavior>
    <a 
      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="Toggle Menu"
      onClick={(e) => handleNavClick(e, item.href)}
    >
      {item.name}
    </a>
  </Link>
))}

方案二：适配Next.js 13+ App Router（无legacyBehavior） #

利用App Router的scroll属性禁用默认滚动，再手动触发平滑效果：

1. 引入useRouter并定义处理函数（需标记为客户端组件）

'use client';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

const YourComponent = () => {
  const router = useRouter();

  const handleNavClick = (href) => {
    router.push(href);
    // 处理锚点平滑滚动
    if (href.includes('#')) {
      const targetId = href.split('#')[1];
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
    handleOpen(); // 保留原菜单关闭逻辑
  };

  // ... 其余组件代码
};

2. 修改Link组件的使用方式

{navItems.map((item, index) => (
  <div key={index} onClick={() => handleNavClick(item.href)}>
    <Link 
      href={item.href} 
      scroll={false} // 禁用Next.js默认滚动行为
      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="Toggle Menu"
    >
      {item.name}
    </Link>
  </div>
))}

补充提示 #

• 保留html { scroll-behavior: smooth; }作为降级方案，确保原生跳转场景下的平滑滚动依然生效。
• 确保锚点ID与href中的值完全匹配（大小写敏感），避免因ID不匹配导致滚动失效。
• 跨页面锚点跳转也适用上述方案，因为客户端导航完成后目标页面已加载，可正常定位到锚点元素。

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