react如何调至锚点

在React中实现锚点跳转

使用useRef和scrollIntoView方法 通过React的useRef钩子获取目标DOM节点引用，调用scrollIntoView实现平滑滚动。

import { useRef } from 'react';

function App() {
  const targetRef = useRef(null);

  const scrollToTarget = () => {
    targetRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <button onClick={scrollToTarget}>跳转到锚点</button>
      <div style={{ height: '1000px' }}>占位内容</div>
      <div ref={targetRef}>目标锚点位置</div>
    </div>
  );
}

使用react-router-hash-link库 对于React Router项目，可以安装专用库处理带哈希的锚点链接。

npm install react-router-hash-link

import { HashLink } from 'react-router-hash-link';

function App() {
  return (
    <div>
      <HashLink smooth to="#section2">
        跳转到第二节
      </HashLink>
      <div id="section1" style={{ height: '1000px' }}>第一节</div>
      <div id="section2">第二节锚点目标</div>
    </div>
  );
}

原生HTML锚点语法 直接使用HTML的<a>标签实现基础跳转，但会丢失页面状态。

function App() {
  return (
    <div>
      <a href="#target">跳转锚点</a>
      <div style={{ height: '1000px' }}>中间内容</div>
      <div id="target">锚点目标区域</div>
    </div>
  );
}

注意事项

• 平滑滚动需注意浏览器兼容性，IE不支持behavior: 'smooth'参数
• 使用第三方库时需确保与当前React Router版本兼容
• 动态加载内容需等待DOM渲染完成后再执行跳转