Next.js+Tailwind项目中scroll-behavior:smooth仅首页生效问题求助

核心问题分析 #

仅首页锚点导航生效、其他页面锚点无平滑滚动，通常是因为：

• scroll-behavior: smooth 未正确作用于根元素
• Next.js客户端导航的默认行为会跳过原生锚点平滑滚动逻辑
• 目标元素ID重复或DOM未完全渲染就执行滚动

解决方案 #

1. 确保scroll-behavior全局生效 #

检查你的globals.css，确保将属性应用在html标签上（仅作用于body可能失效）：

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

2. 自定义锚点导航组件（推荐） #

替换默认的Next.js Link组件，手动处理锚点的平滑滚动逻辑：

import Link from 'next/link';

export default function NavLink({ href, children }) {
  const handleAnchorClick = (e) => {
    if (href.startsWith('#')) {
      e.preventDefault();
      const targetElement = document.getElementById(href.slice(1));
      targetElement?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <Link href={href} onClick={handleAnchorClick} passHref>
      {children}
    </Link>
  );
}

之后所有导航项都使用这个自定义NavLink组件即可。

3. 全局路由事件监听（适配多页面场景） #

如果你的作品集包含多个页面，可在_app.js中监听路由完成事件，统一处理锚点滚动：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteComplete = (url) => {
      const hash = url.split('#')[1];
      if (!hash) return;

      // 延迟执行确保DOM渲染完成
      setTimeout(() => {
        const target = document.getElementById(hash);
        target?.scrollIntoView({ behavior: 'smooth' });
      }, 100);
    };

    router.events.on('routeChangeComplete', handleRouteComplete);
    return () => router.events.off('routeChangeComplete', handleRouteComplete);
  }, [router]);

  return <Component {...pageProps} />;
}

4. 排查额外问题 #

• 检查所有目标元素的ID是否唯一，无重复定义
• 确认目标元素的父级没有设置overflow: hidden或overflow-y: scroll（会阻断全局滚动行为）
• 若使用Tailwind自定义样式，确保没有覆盖html的scroll-behavior属性

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