react如何调至锚点

使用 useRef 钩子创建锚点

在 React 中，可以通过 useRef 钩子创建对 DOM 元素的引用。在目标元素上绑定 ref，即可通过编程方式滚动到该元素。

import React, { useRef } from 'react';

function ScrollToAnchor() {
  const sectionRef = useRef(null);

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

  return (
    <div>
      <button onClick={scrollToSection}>Scroll to Section</button>
      <div ref={sectionRef} style={{ height: '1000px', marginTop: '20px' }}>
        Target Section
      </div>
    </div>
  );
}

通过 id 属性实现锚点跳转

传统 HTML 锚点可通过 id 属性实现。React 中同样适用，结合 window.location.hash 或 <a> 标签的 href 属性完成跳转。

function AnchorLink() {
  return (
    <div>
      <a href="#section">Jump to Section</a>
      <div id="section" style={{ height: '1000px', marginTop: '20px' }}>
        Target Section
      </div>
    </div>
  );
}

使用第三方库 react-scroll

对于更复杂的滚动需求，可以引入 react-scroll 库。该库提供平滑滚动、偏移量调整等功能。

import { Link } from 'react-scroll';

function SmoothScroll() {
  return (
    <div>
      <Link to="section" smooth={true} duration={500}>
        Scroll to Section
      </Link>
      <div name="section" style={{ height: '1000px', marginTop: '20px' }}>
        Target Section
      </div>
    </div>
  );
}

处理路由兼容性

在单页应用（SPA）中，若锚点与路由冲突，需确保路由库（如 React Router）不会拦截锚点跳转。可通过 <a> 标签的 onClick 事件阻止默认行为。

import { useHistory } from 'react-router-dom';

function RouterAnchor() {
  const history = useHistory();

  const handleClick = (e) => {
    e.preventDefault();
    const targetId = e.target.getAttribute('href').substring(1);
    document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <a href="#section" onClick={handleClick}>
        Scroll to Section
      </a>
      <div id="section" style={{ height: '1000px', marginTop: '20px' }}>
        Target Section
      </div>
    </div>
  );
}

动态锚点与列表渲染

渲染动态列表时，为每个项分配唯一 id 或 ref，通过循环实现批量锚点跳转。

function DynamicAnchors() {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  const refs = items.reduce((acc, item) => {
    acc[item] = React.createRef();
    return acc;
  }, {});

  const scrollToItem = (item) => {
    refs[item].current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      {items.map((item) => (
        <button key={item} onClick={() => scrollToItem(item)}>
          Scroll to {item}
        </button>
      ))}
      {items.map((item) => (
        <div key={item} ref={refs[item]} style={{ height: '500px', marginTop: '20px' }}>
          {item}
        </div>
      ))}
    </div>
  );
}