feat: add scroll duration

examples/docs/en-US/backtop.md

@@ -52,6 +52,8 @@ Display area is 40px \* 40px.
 | visibility-height | the button will not show until the scroll height reaches this value | number |                 | 200     |
 | right             | right distance                                                      | number |                 | 40      |
 | bottom            | bottom distance                                                     | number |                 | 40      |
+| duration    |     | scroll to top will cost this time, millisecond
+     | number |                 | 500     |
 
 ### Events
 

examples/docs/zh-CN/backtop.md

@@ -24,7 +24,10 @@
 ```html
 <template>
   Scroll down to see the bottom-right button.
-  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
+  <el-backtop
+    target=".page-component__scroll .el-scrollbar__wrap"
+    :bottom="100"
+  >
     <div
       style="{
         height: 100%;
@@ -46,12 +49,13 @@
 
 ### Attributes
 
-| 参数              | 说明                             | 类型            | 可选值 | 默认值 |
-| ----------------- | -------------------------------- | --------------- | ------ | ------ |
-| target            | 触发滚动的对象                   | string          |        |        |
-| visibility-height | 滚动高度达到此参数值才出现       | number |        | 200    |
-| right             | 控制其显示位置, 距离页面右边距   | number |        | 40     |
-| bottom            | 控制其显示位置, 距离页面底部距离 | number |        | 40     |
+| 参数              | 说明                               | 类型   | 可选值 | 默认值 |
+| ----------------- | ---------------------------------- | ------ | ------ | ------ |
+| target            | 触发滚动的对象                     | string |        |        |
+| visibility-height | 滚动高度达到此参数值才出现         | number |        | 200    |
+| right             | 控制其显示位置, 距离页面右边距     | number |        | 40     |
+| bottom            | 控制其显示位置, 距离页面底部距离   | number |        | 40     |
+| duration          | 完成滚动到顶部需要花费的时间, 毫秒 | number |        | 500    |
 
 ### Events
 

packages/backtop/src/main.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="el-fade-in">
     <div
-      v-if="visible"
+      v-show="visible"
       @click.stop="handleClick"
       :style="{
         'right': styleRight,
@@ -39,6 +39,10 @@ export default {
     bottom: {
       type: Number,
       default: 40
+    },
+    duration: {
+      type: Number,
+      default: 500
     }
   },
 
@@ -68,7 +72,7 @@ export default {
   methods: {
     init() {
       this.container = document;
-      this.el = document.documentElement;
+      // this.el = document.documentElement;
       if (this.target) {
         this.el = document.querySelector(this.target);
         if (!this.el) {
@@ -78,20 +82,28 @@ export default {
       }
     },
     onScroll() {
-      const scrollTop = this.el.scrollTop;
+      const scrollTop = this.getScrollTop();
       this.visible = scrollTop >= this.visibilityHeight;
     },
+    getScrollTop() {
+      if (this.el) {
+        return this.el.scrollTop;
+      }
+      return document.documentElement.scrollTop || document.body.scrollTop;
+    },
     handleClick(e) {
       this.scrollToTop();
       this.$emit('click', e);
     },
     scrollToTop() {
-      const el = this.el;
+      const el = this.el
+        ? this.el
+        : (document.body.scrollTop ? document.body : document.documentElement);
       const beginTime = Date.now();
       const beginValue = el.scrollTop;
       const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
       const frameFunc = () => {
-        const progress = (Date.now() - beginTime) / 500;
+        const progress = (Date.now() - beginTime) / this.duration;
         if (progress < 1) {
           el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
           rAF(frameFunc);