React+MUI实现点击导航栏按钮跳转对应页面板块的方法

云上老周

2026-9-26

实现方案说明

Material UI 没有单独封装锚点滚动的专属API，你可以直接沿用原生HTML的逻辑，配合MUI组件的属性透传特性快速实现，不需要额外引入依赖。

基础实现步骤

第一步：给每个独立的板块组件绑定唯一id
MUI的容器组件（Box/Container/Section等）以及你自定义的React组件，都会自动透传id等原生HTML属性，直接给组件加id参数即可：

// 示例：给三个板块组件分别绑定唯一id
<AboutSection id="about" />
<ProductSection id="product" />
<ContactSection id="contact" />

第二步：导航栏按钮直接绑定锚点链接
MUI的Button/ListItem等可交互组件支持原生href属性，直接填写#板块id即可实现点击跳转：

import { AppBar, Toolbar, Button } from '@mui/material';

// 导航栏示例
<AppBar position="fixed">
  <Toolbar>
    <Button href="#about" color="inherit">关于我们</Button>
    <Button href="#product" color="inherit">产品介绍</Button>
    <Button href="#contact" color="inherit">联系我们</Button>
  </Toolbar>
</AppBar>

第三步：可选配置平滑滚动
如果需要实现平滑滚动效果，只需要在全局CSS中添加一行配置即可：

html {
  scroll-behavior: smooth;
}

常见问题处理

固定导航栏遮挡板块顶部内容

因为导航栏是fixed固定定位，跳转后板块顶部会被导航栏遮挡，有两种解决方式：

给所有板块组件添加上内边距，值等于导航栏的高度，示例用MUI的sx属性配置：

<AboutSection id="about" sx={{ pt: '70px', scrollMarginTop: '70px' }} />

用JS手动控制滚动位置，适配自定义偏移量：

<Button 
  onClick={() => {
    const target = document.getElementById('about');
    const navHeight = 70; // 你的导航栏高度
    if (target) {
      window.scrollTo({
        top: target.offsetTop - navHeight,
        behavior: 'smooth'
      })
    }
  }}
  color="inherit"
>
  关于我们
</Button>