NextJS项目跨页面锚点路由在Chromium浏览器中异常问题求助

针对你遇到的跨页面路由到锚点时滚动中断的问题，分享几个实测有效的解决思路：

• 监听路由完成事件手动触发滚动
  跨页面路由时，NextJS默认的滚动逻辑可能在页面未完全渲染（比如动态组件、图片还没加载完成）就执行了，导致计算的锚点位置不准。可以在_app.js中添加路由监听，等页面加载完成后再手动滚动：

  import { useEffect } from 'react';
  import { useRouter } from 'next/router';
  
  function MyApp({ Component, pageProps }) {
    const router = useRouter();
  
    useEffect(() => {
      const scrollToAnchor = () => {
        const hashIndex = router.asPath.indexOf('#');
        if (hashIndex !== -1 && typeof window !== 'undefined') {
          const targetId = router.asPath.slice(hashIndex + 1);
          const targetElement = document.getElementById(targetId);
          if (targetElement) {
            // 延迟100ms确保元素及依赖内容渲染完成
            setTimeout(() => {
              targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 100);
          }
        }
      };
  
      router.events.on('routeChangeComplete', scrollToAnchor);
      return () => router.events.off('routeChangeComplete', scrollToAnchor);
    }, [router]);
  
    return <Component {...pageProps} />;
  }
  
  export default MyApp;
  

• 排查动态内容导致的布局偏移
  即使关闭了next/image的懒加载，页面中异步渲染的内容（比如接口请求返回的列表、动态加载的组件）仍可能导致页面高度在滚动后变化，Chromium的滚动锚定机制会因此中断滚动。可以：

  • 给动态内容容器设置最小高度，避免布局突变
  • 利用useEffect等待数据加载完成后再执行滚动逻辑

• 禁用默认滚动恢复自定义实现
  在next.config.js中关闭NextJS的默认滚动恢复，完全自定义滚动逻辑：

  module.exports = {
    experimental: {
      scrollRestoration: false,
    },
  };
  

  然后在页面组件的useEffect中直接读取URL哈希值并滚动：

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const hash = window.location.hash.slice(1);
      if (hash) {
        const target = document.getElementById(hash);
        target?.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, []);
  

• 临时禁用Chromium滚动平滑特性
  Chromium的平滑滚动有时会和NextJS的路由逻辑冲突，可临时切换为自动滚动，完成后再恢复：

  useEffect(() => {
    if (!window.location.hash) return;
  
    const originalScrollBehavior = document.documentElement.style.scrollBehavior;
    document.documentElement.style.scrollBehavior = 'auto';
    
    const targetId = window.location.hash.slice(1);
    const target = document.getElementById(targetId);
    target?.scrollIntoView();
  
    setTimeout(() => {
      document.documentElement.style.scrollBehavior = originalScrollBehavior;
    }, 300);
  }, []);
  

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