From d961d9d5c6e0eaa4c784dcb0269d5f02aea5db35 Mon Sep 17 00:00:00 2001
From: lon <longhao.lhl@alibaba-inc.com>
Date: Thu, 15 Aug 2019 17:42:55 +0800
Subject: [PATCH] BackTop: use cubic bezier scrolling

---
 packages/backtop/src/main.vue | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/backtop/src/main.vue b/packages/backtop/src/main.vue
index 6e1beb130..806f43ea9 100644
--- a/packages/backtop/src/main.vue
+++ b/packages/backtop/src/main.vue
@@ -18,6 +18,11 @@
 <script>
 import throttle from 'throttle-debounce/throttle';
 
+const cubic = value => Math.pow(value, 3);
+const easeInOutCubic = value => value < 0.5
+  ? cubic(value * 2) / 2
+  : 1 - cubic((1 - value) * 2) / 2;
+
 export default {
   name: 'ElBacktop',
 
@@ -81,16 +86,20 @@ export default {
       this.$emit('click', e);
     },
     scrollToTop() {
-      let el = this.el;
-      let step = 0;
-      let interval = setInterval(() => {
-        if (el.scrollTop <= 0) {
-          clearInterval(interval);
-          return;
+      const el = this.el;
+      const beginTime = Date.now();
+      const beginValue = el.scrollTop;
+      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
+      const frameFunc = () => {
+        const progress = (Date.now() - beginTime) / 500;
+        if (progress < 1) {
+          el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
+          rAF(frameFunc);
+        } else {
+          el.scrollTop = 0;
         }
-        step += 10;
-        el.scrollTop -= step;
-      }, 20);
+      };
+      rAF(frameFunc);
     }
   },