React实现页面滚动时同步更新浏览器URL 支持锚点直达对应区块

1. 基础结构准备 #

首先搭建4个区块的页面结构，给每个区块设置唯一id和足够的滚动高度：

import { useEffect, useCallback } from 'react';

const SECTION_IDS = ['who-we-are', 'about', 'members', 'alumni'];
// 如果仅需要Members区块触发URL更新，可改为 const SECTION_IDS = ['members']

const WhoWeArePage = () => {
  // 后续逻辑写在此处

  return (
    <div className="page-container">
      <section id="who-we-are" className="section-block">
        <h2>Who we are</h2>
        {/* 区块内容 */}
      </section>
      <section id="about" className="section-block">
        <h2>About</h2>
        {/* 区块内容 */}
      </section>
      <section id="members" className="section-block">
        <h2>Members</h2>
        {/* 区块内容 */}
      </section>
      <section id="alumni" className="section-block">
        <h2>Alumni</h2>
        {/* 区块内容 */}
      </section>
    </div>
  )
}

export default WhoWeArePage;

添加基础样式保证区块可滚动：

.section-block {
  min-height: 100vh;
}
/* 可选：全局开启平滑滚动 */
html {
  scroll-behavior: smooth;
}

2. 滚动监听自动更新URL #

使用IntersectionObserver监听区块进入视口的状态，性能远优于传统scroll事件，更新URL时用replaceState避免生成多余历史记录：

useEffect(() => {
  const observedElements = [];
  // 初始化观察者
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 区块50%面积进入视口时触发，可根据需求调整阈值
      if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
        const activeSectionId = entry.target.id;
        // 更新地址栏URL，不触发页面刷新
        window.history.replaceState(null, '', `/who-we-are#${activeSectionId}`);
      }
    })
  }, {
    threshold: 0.5
  });

  // 绑定所有需要监听的区块
  SECTION_IDS.forEach(id => {
    const element = document.getElementById(id);
    if (element) {
      observer.observe(element);
      observedElements.push(element);
    }
  })

  // 组件卸载时销毁监听，避免内存泄漏
  return () => {
    observedElements.forEach(el => observer.unobserve(el));
  }
}, []);

3. 访问带Hash链接自动跳转 #

处理用户直接访问带锚点链接的场景，页面加载完成后自动平滑滚动到对应区块：

const scrollToTargetSection = useCallback(() => {
  // 提取hash值，去掉前缀#
  const currentHash = window.location.hash.slice(1);
  if (!currentHash || !SECTION_IDS.includes(currentHash)) return;

  const targetElement = document.getElementById(currentHash);
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: 'smooth', // 开启平滑滚动
      block: 'start' // 区块顶部对齐视口顶部
    })
  }
}, []);

useEffect(() => {
  // 加短延迟保证DOM完全渲染后再执行滚动
  const timer = setTimeout(scrollToTargetSection, 100);
  return () => clearTimeout(timer);
}, [scrollToTargetSection]);

注意事项 #

• 如果使用React Router等路由框架，replaceState的路径前缀需要和当前页面路由保持一致
• 如果页面有固定顶部导航栏，可以给html添加scroll-padding-top: 导航栏高度属性，避免滚动后区块被导航遮挡
• 可以调整IntersectionObserver的threshold参数，修改触发URL更新的区块可见比例

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