React中如何实现平滑滚动到指定组件？

嘿，我明白你想要的是平滑滚动到目标组件，而不是生硬的跳转——原生锚点确实会有那种突兀的感觉。下面给你几个在React项目里实现这个效果的实用方案，你可以根据自己的需求选择：

方法一：原生CSS全局平滑滚动（最简单） #

这个方案几乎不需要改动你的JS代码，只需要在全局样式文件里添加一行CSS：

html {
  scroll-behavior: smooth;
}

然后确保你的About组件根元素上有对应的id：

// About组件示例
function About() {
  return (
    <div id="about">
      {/* 你的About组件内容 */}
    </div>
  )
}

这样保留你原来的<a href="#about">链接，点击后就会自动平滑滚动到目标组件了。优点是零JS逻辑改动，缺点是如果需要定制滚动速度、偏移量这类细节，就不够灵活了。

方法二：React useRef + scrollIntoView（定制化首选） #

如果你需要更精细的控制滚动行为（比如避开固定导航栏、调整滚动位置），这个方法更合适：

1. 在Home组件中给About组件创建Ref，并定义滚动方法：

import React from 'react';

class Home extends React.Component {
  constructor(props) {
    super(props);
    // 类组件中使用createRef创建引用
    this.aboutRef = React.createRef();
  }

  // 定义滚动到About组件的方法
  scrollToAbout = () => {
    this.aboutRef.current?.scrollIntoView({
      behavior: 'smooth', // 开启平滑滚动
      block: 'start', // 滚动到组件顶部，可选'center'/'end'
      inline: 'nearest'
    });
  }

  render() {
    return (
      <div>
        <Header />
        {/* 把滚动方法传递给Overview组件 */}
        <Overview scrollToAbout={this.scrollToAbout} />
        {/* 将Ref绑定到About组件的根元素 */}
        <About ref={this.aboutRef} />
        <Footer />
      </div>
    );
  }
}

2. 修改Overview组件，替换原生<a>标签为可点击元素并绑定事件：

// Overview组件示例
function Overview({ scrollToAbout }) {
  return (
    <div>
      <div 
        className="more-text group" 
        onClick={scrollToAbout}
        style={{ cursor: 'pointer' }} // 加上鼠标指针样式，提示可点击
      >
        <h3 className="title">+ </h3>
        <h3 className="title">learn more</h3>
      </div>
    </div>
  )
}

3. 确保About组件可以接收Ref（如果是函数组件，需要用forwardRef包裹）：

import React, { forwardRef } from 'react';

// 用forwardRef包裹函数组件，传递ref到根元素
const About = forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      {/* 你的About组件内容 */}
    </div>
  );
});

export default About;

这个方案的优势是完全可控，你还可以在scrollToAbout方法里添加额外逻辑，比如计算固定导航栏的高度，调整滚动偏移量，避免组件被导航栏遮挡。

方法三：第三方库（复杂场景推荐） #

如果你的项目需要更复杂的滚动功能（比如滚动动画、滚动监听、导航高亮），可以用专门的React滚动库，比如react-scroll：

1. 先安装库：

npm install react-scroll

2. 在Overview组件中使用库提供的Link组件：

import { Link } from 'react-scroll';

function Overview() {
  return (
    <div>
      <Link
        className="more-text group"
        to="about" // 目标组件的id
        spy={true} // 开启滚动监听
        smooth={true} // 平滑滚动
        offset={-70} // 偏移量，比如固定导航栏高度70，设置-70让内容显示在导航栏下方
        duration={500} // 滚动时长（毫秒）
      >
        <h3 className="title">+ </h3>
        <h3 className="title">learn more</h3>
      </Link>
    </div>
  )
}

3. 给About组件根元素设置对应id：

function About() {
  return (
    <div id="about">
      {/* 你的About组件内容 */}
    </div>
  )
}

这个库提供了很多开箱即用的功能，适合有复杂滚动需求的场景。

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