实现单页应用中Header点击滚动至其他组件内的指定区块

嘿，这个跨组件滚动的需求其实挺常见的，我给你两种实用的实现方案，你可以根据自己的场景选择：

方案一：HTML原生锚点（简单易上手） #

这种方法利用HTML的id锚点特性，适合不需要太复杂逻辑的场景，步骤如下：

1. 给目标组件内的指定区块添加唯一id
2. 在Header组件中添加点击触发元素，通过href指向目标id，同时阻止默认跳转行为（避免页面刷新）

代码示例： #

Header组件

import React from 'react';

const Header = () => {
  const handleScroll = (e) => {
    // 阻止默认的页面跳转行为
    e.preventDefault();
    // 获取目标id
    const targetId = e.target.getAttribute('href').slice(1);
    // 找到目标元素并触发平滑滚动
    document.getElementById(targetId)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <header style={{ padding: '20px', background: '#f5f5f5' }}>
      {/* 点击这个链接跳转到描述区块 */}
      <a href="#description-block" onClick={handleScroll} style={{ marginRight: '20px', cursor: 'pointer' }}>
        查看描述
      </a>
    </header>
  );
};

export default Header;

Description组件

import React from 'react';

const Description = () => {
  return (
    <div style={{ marginTop: '800px', padding: '20px' }}>
      {/* 给需要滚动到的区块添加唯一id */}
      <div id="description-block">
        <h2>描述区块</h2>
        <p>这是你要滚动到的目标内容区域～</p>
      </div>
    </div>
  );
};

export default Description;

方案二：useRef + scrollIntoView（灵活可控） #

如果需要更自定义的滚动逻辑（比如滚动前做一些处理、精准控制滚动位置），可以用React的useRef结合DOM的scrollIntoView方法，步骤如下：

1. 在父组件（比如App.js）中创建ref，传递给目标组件
2. 父组件定义滚动触发函数，传递给Header组件
3. Header组件点击时调用该函数，触发滚动

代码示例： #

父组件（App.js）

import React, { useRef } from 'react';
import Header from './Header';
import Banner from './Banner';
import Description from './Description';

const App = () => {
  // 创建ref指向目标区块
  const descriptionRef = useRef(null);

  // 定义滚动函数
  const scrollToDescription = () => {
    if (descriptionRef.current) {
      // 触发平滑滚动到目标元素
      descriptionRef.current.scrollIntoView({
        behavior: 'smooth',
        block: 'start' // 可选：控制滚动对齐方式，比如顶部对齐
      });
    }
  };

  return (
    <div>
      {/* 把滚动函数传递给Header */}
      <Header onScrollToDesc={scrollToDescription} />
      <Banner />
      {/* 把ref传递给Description组件 */}
      <Description ref={descriptionRef} />
    </div>
  );
};

export default App;

Description组件（用forwardRef接收ref）

import React, { forwardRef } from 'react';

// 使用forwardRef让父组件能传递ref进来
const Description = forwardRef((props, ref) => {
  return (
    <div style={{ marginTop: '800px', padding: '20px' }}>
      {/* 把ref绑定到目标区块上 */}
      <div ref={ref}>
        <h2>描述区块</h2>
        <p>这是你要滚动到的目标内容区域～</p>
      </div>
    </div>
  );
});

export default Description;

Header组件

import React from 'react';

const Header = ({ onScrollToDesc }) => {
  return (
    <header style={{ padding: '20px', background: '#f5f5f5' }}>
      {/* 点击按钮触发滚动函数 */}
      <button onClick={onScrollToDesc} style={{ cursor: 'pointer', border: 'none', padding: '8px 16px', borderRadius: '4px' }}>
        查看描述
      </button>
    </header>
  );
};

export default Header;

两种方案对比 #

• 原生锚点：代码少、易实现，适合简单场景；但灵活性差，难以自定义滚动逻辑。
• useRef方案：更灵活，能控制滚动行为、添加前置逻辑；需要处理ref的传递，代码稍多但可控性强。

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