Next.js/React下如何创建路由链接实现页内元素滚动，以路径替代锚点并同步更新URL

Next.js 和 React 都没有开箱即用的、直接将页内锚点映射为路径段的内置能力，但可以基于框架原生API组合实现完全匹配需求的效果，不需要引入重型第三方依赖。 #

两个核心需求的落地逻辑 #

1. 匹配/page/dummy格式链接的滚动定位行为 #

• 路由层配置：如果使用Next.js App Router，无需为每个锚点新建独立页面，可以在/page/[slug]动态路由下做判断：当请求的slug是预先定义的页内锚点ID时，渲染和/page主页完全一致的内容。
• 滚动定位逻辑：框架本身不会在检测到路由参数匹配DOM元素ID时自动触发锚点滚动，需要手动在客户端完成定位：
  • 在客户端组件的副作用钩子中读取当前路由参数，找到和参数值匹配的、带有对应id的DOM节点
  • 调用节点的scrollIntoView()方法，即可实现和传统#dummy锚点完全一致的滚动效果
• 注意：SSR首屏加载场景下，需要等待DOM完全渲染完成后再执行滚动逻辑，避免因节点未挂载导致找不到元素的报错。

参考基础实现片段：

import { useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';

export default function Page() {
  const params = useParams();
  const router = useRouter();

  useEffect(() => {
    // 仅当存在匹配的锚点ID参数时执行滚动
    if (params?.slug && document.getElementById(params.slug)) {
      document.getElementById(params.slug).scrollIntoView();
    }
  }, [params?.slug]);

  return (
    <main>
      <section id="intro">页首内容</section>
      <div id="dummy">目标锚点区块</div>
      <section id="footer">页尾内容</section>
    </main>
  )
}

这种无刷新路由跳转的体验，比传统带锚点的URL跳转更流畅。

2. 滚动到对应区块时自动同步URL #

这部分完全可以基于浏览器原生的IntersectionObserverAPI实现，React和Next.js都可以直接调用，不需要额外封装：

• 为每个需要监听的、带锚点ID的页内元素创建观察实例
• 当元素滚动到和传统锚点定位一致的视口位置时，调用路由API将当前URL替换为对应的/page/元素id格式
• 两个必要的边界处理：
  • 更新URL时用路由替换方法（router.replace或原生history.replaceState），不要用路由推送方法，避免在浏览器历史记录中生成无意义的跳转条目，符合用户的正常浏览直觉
  • 增加简单的去抖判断，避免用户在元素边缘小幅滚动时反复切换URL的问题

参考基础实现片段：

useEffect(() => {
  const trackedAnchorIds = ['intro', 'dummy', 'footer'];
  // 元素露出50%时触发，和默认锚点的视口位置对齐
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const currentId = entry.target.id;
        // replace的scroll设为false，避免重复触发滚动
        router.replace(`/page/${currentId}`, { scroll: false });
      }
    })
  }, { threshold: 0.5 });

  // 挂载所有需要观察的元素
  trackedAnchorIds.forEach(id => {
    const el = document.getElementById(id);
    if (el) observer.observe(el);
  });

  // 组件卸载时释放观察实例
  return () => observer.disconnect();
}, [router]);

常见踩坑提示 #

• 不要直接用原生<a href="#dummy">标签实现页内跳转，Next.js 中这种写法会触发完整的页面重载，和无刷新的路由体验不匹配，统一改用Next.js的<Link>组件配合自定义滚动逻辑实现即可。
• 要对齐滚动触发的阈值：确保IntersectionObserver的触发位置和scrollIntoView的定位位置一致，避免出现「URL已经更新但页面停在半空」的体验割裂。

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