当前位置：首页 > React

react 实现锚点

2026-01-27 01:46:52React

实现锚点的基本方法

在React中实现锚点功能可以通过HTML原生锚点标签或结合React的useRef钩子完成。以下是两种常见方式：

HTML原生锚点

const ScrollDemo = () => {
  return (
    <div>
      <a href="#section1">跳转到第一节</a>
      <div id="section1" style={{ height: '1000px' }}>第一节内容</div>
    </div>
  );
}

React useRef实现

import { useRef } from 'react';

const ScrollDemo = () => {
  const sectionRef = useRef(null);

  const scrollToSection = () => {
    sectionRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <button onClick={scrollToSection}>平滑滚动到目标</button>
      <div ref={sectionRef} style={{ height: '1000px' }}>目标区域</div>
    </div>
  );
}

平滑滚动实现

为了实现更流畅的滚动效果，可以结合CSS或JavaScript的滚动行为配置：

react 实现锚点

html {
  scroll-behavior: smooth;
}

或通过JavaScript配置：

scrollIntoView({
  behavior: 'smooth',
  block: 'start' // 'center', 'end'
});

路由锚点集成

在React Router环境中实现锚点导航时，需要注意路由机制与滚动行为的配合：

react 实现锚点

import { useLocation, Link } from 'react-router-dom';

const PageWithAnchor = () => {
  const location = useLocation();
  const sectionRef = useRef(null);

  useEffect(() => {
    if (location.hash === '#section1') {
      sectionRef.current?.scrollIntoView();
    }
  }, [location]);

  return (
    <>
      <Link to="/page#section1">跳转锚点</Link>
      <div ref={sectionRef}>内容区块</div>
    </>
  );
}

注意事项

浏览器原生锚点跳转会立即刷新页面状态，而React的useRef方案能保持组件状态。对于SPA应用推荐使用useRef方案。

滚动监听可能需要添加防抖处理以避免频繁触发滚动事件。当页面存在动态加载内容时，需要确保目标DOM元素已经渲染完成后再执行滚动操作。

对于固定头部布局的情况，计算滚动位置时需要额外考虑头部高度偏移量：

const scrollWithOffset = (ref) => {
  const y = ref.current.getBoundingClientRect().top + window.scrollY - 80;
  window.scrollTo({ top: y, behavior: 'smooth' });
};

标签: react