【Material-UI】App Bar中的Back to Top功能详解

Material-UI 是 React 应用中极受欢迎的 UI 框架，它为开发者提供了多种预制组件，帮助快速构建现代化的用户界面。在本文中，我们将详细介绍如何在 Material-UI 的 App Bar 组件中实现 Back to Top（返回顶部）功能，使用户可以在页面滚动时轻松回到页面顶部。

一、App Bar组件概述

1. 组件介绍

App Bar 是 Material-UI 提供的一个非常重要的导航工具栏组件，它通常位于页面的顶部，展示应用的名称、导航选项或操作按钮。App Bar 组件可以与其他组件如 Toolbar 一起使用，增强用户界面的交互性。

在用户浏览长页面时，为了提升用户体验，常见的设计模式之一是提供一个“返回顶部”的按钮，帮助用户快速回到页面的起点。通过 Material-UI 的组件，我们可以轻松地实现这一功能。

2. Back to Top 功能的作用

当用户滚动浏览页面内容时，如果页面过长，滚动回顶部的操作可能会变得繁琐。此时，提供一个浮动按钮（Floating Action Button）使用户能够在页面底部快速点击返回顶部，极大地改善了用户的使用体验。

Back to Top 功能通常以一个可见的按钮形式呈现，它在用户滚动到一定距离后出现，并通过点击返回页面顶部。这种交互方式在现代网页设计中非常常见。

二、实现 Back to Top 功能的步骤

1. 使用 Material-UI 的组件

为了在 App Bar 中实现 Back to Top 功能，我们需要利用以下组件：

• AppBar：用于显示顶部导航栏。
• Toolbar：工具栏，放置导航元素。
• Fab（Floating Action Button）：浮动按钮，用于返回顶部操作。
• KeyboardArrowUpIcon：返回顶部按钮的图标。
• useScrollTrigger：滚动触发器，用于检测用户是否滚动页面。

2. 代码示例

以下是一个完整的代码示例，展示了如何通过 Material-UI 实现 Back to Top 功能：

import * as React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import CssBaseline from '@mui/material/CssBaseline';
import useScrollTrigger from '@mui/material/useScrollTrigger';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Fab from '@mui/material/Fab';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import Fade from '@mui/material/Fade';

function ScrollTop(props) {
  const { children, window } = props;

  const trigger = useScrollTrigger({
    target: window ? window() : undefined,
    disableHysteresis: true,
    threshold: 100,
  });

  const handleClick = (event) => {
    const anchor = (event.target.ownerDocument || document).querySelector('#back-to-top-anchor');
    if (anchor) {
      anchor.scrollIntoView({ block: 'center' });
    }
  };

  return (
    <Fade in={trigger}>
      <Box onClick={handleClick} role="presentation" sx={{ position: 'fixed', bottom: 16, right: 16 }}>
        {children}
      </Box>
    </Fade>
  );
}

ScrollTop.propTypes = {
  children: PropTypes.element.isRequired,
  window: PropTypes.func,
};

export default function BackToTop(props) {
  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar>
        <Toolbar>
          <Typography variant="h6" component="div">
            Scroll to see button
          </Typography>
        </Toolbar>
      </AppBar>
      <Toolbar id="back-to-top-anchor" />
      <Container>
        <Box sx={{ my: 2 }}>
          {[...new Array(12)]
            .map(() => `Cras mattis consectetur purus sit amet fermentum.
            Cras justo odio, dapibus ac facilisis in, egestas eget quam.
            Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`)
            .join('\n')}
        </Box>
      </Container>
      <ScrollTop {...props}>
        <Fab size="small" aria-label="scroll back to top">
          <KeyboardArrowUpIcon />
        </Fab>
      </ScrollTop>
    </React.Fragment>
  );
}

3. 代码解释

• AppBar 和 Toolbar：这些组件用来创建固定在页面顶部的导航栏。
• ScrollTop 组件：此组件使用 useScrollTrigger 来监听用户的滚动行为，当页面滚动超过 100px 时，触发显示返回顶部的按钮。
• Fab（浮动按钮）：当用户点击这个按钮时，页面会平滑地滚动回到顶部。
• Fade：按钮通过渐隐的方式显示和隐藏，提升用户体验。

4. 组件的关键属性

• useScrollTrigger：Material-UI 提供的一个钩子，用于在滚动时触发某些交互。这是实现 Back to Top 按钮核心功能的关键。
• Fab：浮动按钮，样式上可以通过 sx 属性自定义位置，例如在屏幕右下角固定显示。
• Fade：让按钮渐显和渐隐，提高了页面的流畅感。

三、Back to Top 功能的自定义

1. 自定义按钮样式

Fab 按钮不仅支持默认的小尺寸（size="small"），也可以根据需要设置为中等或大尺寸。此外，可以通过 sx 属性自定义按钮的位置，例如：

sx={{ position: 'fixed', bottom: 16, right: 16 }}

如果你希望按钮显示在页面的左下角，只需将 right 属性改为 left 即可：

sx={{ position: 'fixed', bottom: 16, left: 16 }}

2. 自定义滚动距离触发器

在示例中，返回顶部按钮的显示是基于页面滚动距离超过 100px 时触发的。你可以通过修改 threshold 值来调整触发距离，例如：

threshold: 200

这意味着只有当用户滚动超过 200px 时，按钮才会显示。

3. 平滑滚动效果

为了提供更好的用户体验，页面返回顶部时的滚动效果是平滑的。这是通过 scrollIntoView({ block: 'center' }) 实现的。你也可以根据需求调整滚动的行为，例如设置为 behavior: 'smooth' 以增强平滑度：

anchor.scrollIntoView({
  behavior: 'smooth',
  block: 'center',
});

四、Back to Top 功能的实际应用场景

Back to Top 功能在多种场景下都非常实用，尤其是以下几类页面：

• 长文章页面：当用户浏览大量文本时，返回顶部按钮可以帮助他们轻松回到页面的起点。
• 信息密集型页面：如文档、新闻、产品列表等长页面，返回顶部功能可以极大提升导航的便利性。
• 移动端支持：浮动按钮在移动设备上表现也非常优秀，为用户提供了便捷的交互方式。

五、总结

通过使用 Material-UI 提供的组件，我们可以轻松地在应用中实现 Back to Top 功能。此功能不仅提升了用户体验，也增强了页面的可用性。通过自定义按钮样式、滚动触发器和滚动行为，开发者可以根据不同的设计需求，灵活地调整返回顶部按钮的表现形式。

推荐：

• JavaScript
• react
• vue

---