React应用中如何实现点击一个组件的按钮滚动到另一个组件的对应div

之前出现单独渲染表单的问题，是因为你给表单组件配置了独立的路由规则，只要把导航、hero、表单、页脚都放在同一个路由对应的页面组件内，再用以下任意方案即可实现保留所有组件的滚动效果：

方案1：原生HTML锚点（无依赖，最简单） #

无需引入额外依赖，仅用原生HTML特性即可实现：

• 给表单组件的外层容器添加id属性，比如id="contact-form"
• 导航栏的按钮直接用<a>标签，href属性填#contact-form
• 可选：在全局CSS添加scroll-behavior: smooth;实现平滑滚动

代码示例：

// Form.jsx 表单组件
const Form = () => {
  return (
    <div id="contact-form">
      {/* 表单内部内容 */}
    </div>
  )
}

// Navbar.jsx 导航组件
const Navbar = () => {
  return (
    <nav>
      {/* 其他导航项 */}
      <a href="#contact-form">跳转到表单</a>
    </nav>
  )
}

/* 全局CSS，添加平滑滚动效果 */
html {
  scroll-behavior: smooth;
}

方案2：useRef 实现（更灵活，支持自定义控制） #

适合需要自定义滚动偏移量、滚动完成后触发回调的场景：

• 在所有组件的公共父组件（通常是App.jsx或者对应页面组件）中创建ref
• 将ref传递给表单组件，绑定到表单的外层容器
• 将滚动触发方法传递给导航组件，绑定到按钮的点击事件

代码示例：

// App.jsx 父组件
import { useRef } from 'react'
import Navbar from './Navbar'
import Hero from './Hero'
import Form from './Form'
import Footer from './Footer'

function App() {
  const formRef = useRef(null)
  // 滚动到表单的方法
  const scrollToForm = () => {
    formRef.current?.scrollIntoView({
      behavior: 'smooth', // 平滑滚动
      block: 'start' // 对齐到容器顶部，可选填'center'对齐到视口中间
    })
    // 如果需要规避固定导航栏的遮挡，可替换为下面的代码，80是导航栏的高度，可自行调整
    // window.scrollTo({
    //   top: formRef.current.offsetTop - 80,
    //   behavior: 'smooth'
    // })
  }

  return (
    <div className="App">
      <Navbar scrollToForm={scrollToForm} />
      <Hero />
      <Form formRef={formRef} />
      <Footer />
    </div>
  )
}

// Form.jsx 表单组件
const Form = ({ formRef }) => {
  return (
    <div ref={formRef}>
      {/* 表单内部内容 */}
    </div>
  )
}

// Navbar.jsx 导航组件
const Navbar = ({ scrollToForm }) => {
  return (
    <nav>
      {/* 其他导航项 */}
      <button onClick={scrollToForm}>跳转到表单</button>
    </nav>
  )
}

方案3：配合React Router使用（适配多路由场景） #

如果你的项目已经接入了React Router，不需要给表单配置独立路由，所有同页组件都放在同一个路由的页面组件内，直接使用带hash的Link即可：

import { Link } from 'react-router-dom'

// 导航组件内使用
<Link to="/#contact-form">跳转到表单</Link>

如果需要平滑滚动，同样在全局CSS添加scroll-behavior: smooth即可。

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