Backtop: Add backtop component

components.json

@@ -73,5 +73,6 @@
   "link": "./packages/link/index.js",
   "divider": "./packages/divider/index.js",
   "image": "./packages/image/index.js",
-  "calendar": "./packages/calendar/index.js"
+  "calendar": "./packages/calendar/index.js",
+  "backtop": "./packages/backtop/index.js"
 }

examples/docs/en-US/backtop.md

@@ -0,0 +1,60 @@
+## Backtop
+
+A button to back to top
+
+### Basic usage
+
+Scroll down to see the bottom-right button.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+</template>
+```
+
+:::
+
+### Customizations
+
+Display area is 40px \* 40px.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" bottom="100">
+    <div
+      style="{
+    height: 100%;
+    width: 100%;
+    background-color: #f2f5f6;
+    box-shadow: 0 0 6px rgba(0,0,0, .12);
+    text-align: center;
+    line-height: 40px;
+    color: #1989fa;
+    }"
+    >
+      UP
+    </div>
+  </el-backtop>
+</template>
+```
+
+:::
+
+### Attributes
+
+| Attribute         | Description                                                         | Type            | Accepted Values | Default |
+| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
+| target            | the target to trigger scroll                                        | string          |                 |         |
+| visibility-height | the button will not show until the scroll height reaches this value | string / number |                 | 200     |
+| right             | right distance                                                      | string / number |                 | 40      |
+| bottom            | bottom distance                                                     | string / number |                 | 40      |
+
+### Events
+
+| Event Name | Description         | Parameters  |
+| ---------- | ------------------- | ----------- |
+| click      | triggers when click | click event |

examples/docs/es/backtop.md

@@ -0,0 +1,60 @@
+## Backtop
+
+A button to back to top
+
+### Basic usage
+
+Scroll down to see the bottom-right button.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+</template>
+```
+
+:::
+
+### Customizations
+
+Display area is 40px \* 40px.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" bottom="100">
+    <div
+      style="{
+    height: 100%;
+    width: 100%;
+    background-color: #f2f5f6;
+    box-shadow: 0 0 6px rgba(0,0,0, .12);
+    text-align: center;
+    line-height: 40px;
+    color: #1989fa;
+    }"
+    >
+      UP
+    </div>
+  </el-backtop>
+</template>
+```
+
+:::
+
+### Attributes
+
+| Attribute         | Description                                                         | Type            | Accepted Values | Default |
+| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
+| target            | the target to trigger scroll                                        | string          |                 |         |
+| visibility-height | the button will not show until the scroll height reaches this value | string / number |                 | 200     |
+| right             | right distance                                                      | string / number |                 | 40      |
+| bottom            | bottom distance                                                     | string / number |                 | 40      |
+
+### Events
+
+| Event Name | Description         | Parameters  |
+| ---------- | ------------------- | ----------- |
+| click      | triggers when click | click event |

examples/docs/fr-FR/backtop.md

@@ -0,0 +1,60 @@
+## Backtop
+
+A button to back to top
+
+### Basic usage
+
+Scroll down to see the bottom-right button.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+</template>
+```
+
+:::
+
+### Customizations
+
+Display area is 40px \* 40px.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" bottom="100">
+    <div
+      style="{
+    height: 100%;
+    width: 100%;
+    background-color: #f2f5f6;
+    box-shadow: 0 0 6px rgba(0,0,0, .12);
+    text-align: center;
+    line-height: 40px;
+    color: #1989fa;
+    }"
+    >
+      UP
+    </div>
+  </el-backtop>
+</template>
+```
+
+:::
+
+### Attributes
+
+| Attribute         | Description                                                         | Type            | Accepted Values | Default |
+| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
+| target            | the target to trigger scroll                                        | string          |                 |         |
+| visibility-height | the button will not show until the scroll height reaches this value | string / number |                 | 200     |
+| right             | right distance                                                      | string / number |                 | 40      |
+| bottom            | bottom distance                                                     | string / number |                 | 40      |
+
+### Events
+
+| Event Name | Description         | Parameters  |
+| ---------- | ------------------- | ----------- |
+| click      | triggers when click | click event |

examples/docs/zh-CN/backtop.md

@@ -0,0 +1,60 @@
+## Backtop 回到顶部
+
+返回页面顶部的操作按钮
+
+### 基础用法
+
+滑动页面即可看到右下方的按钮。
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+</template>
+```
+
+:::
+
+### 自定义显示内容
+
+显示区域被固定为 40px \* 40px 的区域, 其中的内容可支持自定义。
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" bottom="100">
+    <div
+      style="{
+    height: 100%;
+    width: 100%;
+    background-color: #f2f5f6;
+    box-shadow: 0 0 6px rgba(0,0,0, .12);
+    text-align: center;
+    line-height: 40px;
+    color: #1989fa;
+    }"
+    >
+      UP
+    </div>
+  </el-backtop>
+</template>
+```
+
+:::
+
+### Attributes
+
+| 参数              | 说明                             | 类型            | 可选值 | 默认值 |
+| ----------------- | -------------------------------- | --------------- | ------ | ------ |
+| target            | 触发滚动的对象                   | string          |        |        |
+| visibility-height | 滚动高度达到此参数值才出现       | string / number |        | 200    |
+| right             | 控制其显示位置, 距离页面右边距   | string / number |        | 40     |
+| bottom            | 控制其显示位置, 距离页面底部距离 | string / number |        | 40     |
+
+### Events
+
+| 事件名 | 说明               | 回调参数 |
+| ------ | ------------------ | -------- |
+| click  | 点击按钮触发的事件 | 点击事件 |

examples/nav.config.json

@@ -267,6 +267,10 @@
             {
               "path": "/image",
               "title": "Image 图片"
+            },
+            {
+              "path": "/backtop",
+              "title": "Backtop 回到顶部"
             }
           ]
         }
@@ -541,6 +545,10 @@
             {
               "path": "/image",
               "title": "Image"
+            },
+            {
+              "path": "/backtop",
+              "title": "Backtop"
             }
           ]
         }
@@ -815,6 +823,10 @@
             {
               "path": "/image",
               "title": "Image"
+            },
+            {
+              "path": "/backtop",
+              "title": "Backtop"
             }
           ]
         }
@@ -1089,6 +1101,10 @@
             {
               "path": "/image",
               "title": "Image"
+            },
+            {
+              "path": "/backtop",
+              "title": "Backtop"
             }
           ]
         }