ReactJS UI Ant Design BackTop 组件

Ant Design 是由阿里巴巴的一个团队开发的一套企业级的 UI 设计语言和 React UI 组件库，该库提供了大量的常用 UI 组件，包括 BackTop 组件，用于实现返回顶部的功能。

介绍

BackTop 组件是 Ant Design 提供的用于返回顶部的组件。使用 BackTop 组件可以让用户轻松地回到页面的顶部，提高用户体验。

BackTop 组件只需要一个参数 visibilityHeight ，用于设置滚动多少距离后出现返回顶部功能（默认为 400px），在可视高度内时，组件会显示一个按钮，点击该按钮即可返回页面顶部。

BackTop 组件支持了多种风格样式，并且可以通过 Props 来自定义按钮的图标、样式等。

安装

使用 npm 安装：

npm install antd

使用

在应用程序中导入 BackTop 组件：

import { BackTop } from 'antd';

在组件的 render() 方法中使用 BackTop 组件：

render() {
  return (
    <div>
      <h1>Ant Design BackTop 组件</h1>
      <p>向下滚动以查看返回顶部按钮</p>
      <BackTop />
    </div>
  );
}

Props

BackTop 组件支持的 Props：

| Name | Type | Default | Description | | ------------------ | ------ | ------------------------ | ---------------------------------------------------------------------------------------- | | visibilityHeight | Number | 400 | 设置滚动多少距离后出现返回顶部功能的可视化高度 | | target | () => HTMLElement | () => window | 滚动的容器 | | onClick | () => any | - | 点击按钮时的回调函数 | | duration | Number | 450 | 返回顶部所需的时间，单位为 ms | | style | React.CSSProperties | {} | BackTop 的样式 | | className | String | - | BackTop 的 class 名称 | | prefixCls | String | 'ant-back-top' | BackTop 的前缀名称 | | children | React.ReactNode | BackTop 默认按钮 | 自定义 BackTop 组件的图标或样式 |

示例

下面是一个自定义了 BackTop 图标和样式的示例：

import { BackTop } from 'antd';
import { UpOutlined } from '@ant-design/icons';

render() {
  const customizeIcon = (
    <div style={{ fontSize: '16px', lineHeight: '16px', width: '32px', height: '32px', borderRadius: '4px', backgroundColor: '#1088e9', color: '#fff', textAlign: 'center' }}>
      <UpOutlined />
    </div>
  );

  return (
    <div>
      <BackTop visibilityHeight={200} target={() => document.querySelector('#scroll-container')}>
        {customizeIcon}
      </BackTop>
      <div id="scroll-container" style={{ height: '300px', overflow: 'auto' }}>
        <p>这是一个滚动容器</p>
        <ul>
          {[...Array(20).keys()].map(i => (
            <li key={i}>第 {i} 行</li>
          ))}
        </ul>
      </div>
    </div>
  )
}

预览效果如下：