React页面点击头部按钮实现平滑滚动至指定区域的问题

为什么你原来的方法没效果？ #

window.location.replace('/#info') 是直接修改URL并触发页面锚点跳转，浏览器会瞬间定位到目标元素，属于页面级的导航行为，不会触发平滑滚动效果。

方案1：用scrollIntoView直接操作DOM（最直接） #

方式A：通过useRef获取目标元素

import { useRef } from 'react';

function YourPage() {
  // 创建ref绑定到目标元素
  const infoSectionRef = useRef(null);

  // 点击按钮触发平滑滚动
  const handleScrollToInfo = () => {
    // 检查ref是否存在，避免报错
    infoSectionRef.current?.scrollIntoView({
      behavior: 'smooth', // 开启平滑滚动
      block: 'start' // 滚动到元素顶部，可选值还有'center'/'end'
    });
  };

  return (
    <div>
      {/* 头部按钮 */}
      <button onClick={handleScrollToInfo}>Info</button>

      {/* 页面其他内容 */}
      <div style={{ height: '1000px' }}>占位内容</div>

      {/* 目标位置，绑定ref */}
      <h2 ref={infoSectionRef} id='info'>ABOUT ME</h2>
    </div>
  );
}

方式B：通过getElementById定位元素（不用ref也能实现）

const handleScrollToInfo = () => {
  const targetElement = document.getElementById('info');
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth' });
  }
};

// 按钮直接绑定这个函数
<button onClick={handleScrollToInfo}>Info</button>

方案2：全局CSS配置（所有锚点跳转自动平滑） #

如果希望页面所有锚点跳转都默认平滑滚动，可以给html标签加CSS属性：

html {
  scroll-behavior: smooth;
}

这样你原来的window.location.replace('/#info')也会触发平滑滚动了，不过这个是全局生效的，适合整个项目都需要平滑滚动的场景。

方案3：配合React Router使用（如果项目用了路由） #

如果你的页面是通过React Router路由跳转的，可以用useNavigate配合手动滚动：

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

function Header() {
  const navigate = useNavigate();

  const handleScrollToInfo = () => {
    // 先跳转到目标路由（如果是当前路由就是/#info）
    navigate('/#info');
    // 加个小延迟确保DOM更新完成后再滚动
    setTimeout(() => {
      const targetElement = document.getElementById('info');
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }, 100);
  };

  return <button onClick={handleScrollToInfo}>Info</button>;
}

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