ReactJS UI Ant Design BackTop 组件

BackTop 是 Ant Design 中的一个组件，当用户滚动页面时，它提供一个按钮来返回页面顶部，而无需滚动回到顶部。它将以流畅的滚动动画将用户带到页面顶部。

Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。我们可以通过以下方法轻松使用此 BackTop 组件。

句法：


      Scroll to Top

BackTop 属性：

duration : 该属性指定返回顶部的时间（ms）
target ：该属性指定可滚动区域 dom 节点
visibilityHeight ：此属性指定 BackTop 按钮在滚动高度达到此值之前不会显示
onClick ：该属性指定了一个回调函数，当你点击按钮时可以执行该回调函数

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app demo
```
第 2 步：创建项目文件夹（即 demo）后，使用以下命令移动到该文件夹。
```
cd demo
```
第 3 步：创建 ReactJS 应用程序后，使用以下命令安装 antd 库。
```
npm install antd
```

项目结构：

示例：现在在文件名 App.js 中编写以下代码。

app.js

import { BackTop } from "antd";
import "./App.css";
import "antd/dist/antd.css";
  
const style = {
  height: 40,
  width: 40,
  lineHeight: "40px",
  borderRadius: 4,
  backgroundColor: "#1088e9",
  color: "#fff",
  textAlign: "center",
  fontSize: 14,
};
  
function App() {
  return (
    
      
        Scroll to bottom
        Scroll to bottom
        Scroll to bottom
        Scroll to bottom
        Scroll to bottom
        Scroll to bottom
        Scroll to bottom
        
          UP
        
      
    
  );
}
  
export default App;

运行应用程序：使用以下命令运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

参考： https://ant.design/components/back-top/