From 33a1931721cd3d9c5292861ec43f445fc12a4b44 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Thu, 23 Dec 2021 04:14:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=201.=20=E9=95=BF=E6=8C=89=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E6=BB=91=E5=8A=A8=E6=97=A0=E6=B3=95=E5=AE=9E?=
 =?UTF-8?q?=E6=97=B6=E6=98=BE=E7=A4=BA=E6=8C=89=E9=92=AE=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20=F0=9F=8E=A8=202.=E4=BC=98=E5=8C=96=E8=8A=82?=
 =?UTF-8?q?=E6=B5=81=E5=92=8C=E8=BF=94=E5=9B=9E=E9=A1=B6=E9=83=A8=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/backtop.md |  2 +-
 src/module/backTop/index.vue             | 46 ++++++++++++++++--------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/example/docs/zh-CN/components/backtop.md b/example/docs/zh-CN/components/backtop.md
index 9f130a29..7c8c7024 100644
--- a/example/docs/zh-CN/components/backtop.md
+++ b/example/docs/zh-CN/components/backtop.md
@@ -21,7 +21,7 @@
 <template>
   <!-- 使用默认插槽自定义 -->
   <lay-tooltip content="插槽自定义 backtop " position="left">
-    <lay-backtop target=".layui-body" :showHeight="0" :bottom="160" bgcolor="#5FB878" circular disabled>
+    <lay-backtop @click="handlerClick" target=".layui-body" :showHeight="0" :bottom="160" bgcolor="#5FB878" circular disabled>
       <lay-icon type="layui-icon-dialogue" size="30px"></lay-icon>
     </lay-backtop>
   </lay-tooltip>
diff --git a/src/module/backTop/index.vue b/src/module/backTop/index.vue
index 804636e4..66c8bee8 100644
--- a/src/module/backTop/index.vue
+++ b/src/module/backTop/index.vue
@@ -68,10 +68,12 @@ const emit = defineEmits(['click']);
 const backtopRef = ref<HTMLElement | null>(null);
 const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined);
 let visible = ref(props.showHeight === 0);
+
 const borderRadius = computed(() => {
   if (props.circular) return "50%";
   return typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius;
 });
+
 const styleBacktop = computed(() => {
   return {
     position: props.position,
@@ -84,19 +86,28 @@ const styleBacktop = computed(() => {
   }
 });
 
-// TODO 临时动画方案
+const easeInOut = (value: number): number => {
+  return value < 0.5 ? 2 * value * value : 1 - 2 * (value - 1) * (value - 1);
+}
+
 const scrollToTop = () => {
   if (!scrollTarget.value) return;
   if (scrollTarget.value instanceof Window) {
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); // smooth | instant(default)
   } else {
-    let step = scrollTarget.value.scrollTop / 4;
-    if (scrollTarget.value.scrollTop > 0) {
-      scrollTarget.value.scrollTop -= Math.max(step, 10);
-      setTimeout(() => {
-        scrollToTop();
-      }, 1000 / 60);
+    const previous: number = Date.now();
+    const scrollHeight: number = scrollTarget.value.scrollTop;
+    const animationFunc = () => {
+      if (!scrollTarget.value || scrollTarget.value instanceof Window) return;
+      const elapsed = (Date.now() - previous) / 450;
+      if (elapsed < 1) {
+        scrollTarget.value.scrollTop = scrollHeight * (1 - easeInOut(elapsed));
+        window.requestAnimationFrame(animationFunc);
+      } else {
+        scrollTarget.value.scrollTop = 0;
+      }
     }
+    window.requestAnimationFrame(animationFunc);
   }
 };
 
@@ -138,15 +149,20 @@ const getScrollTarget = () => {
   }
 };
 
+const throttle = (func: Function, wait: number) => {
+  var timer: any = null;
+  return (...args: any) => {
+    if (!timer) {
+      timer = setTimeout(() => {
+        timer = null;
+        func.apply(this, args);
+      }, wait);
+    }
+  };
+}
+
 onMounted(() => {
-  let timer: any = undefined;
   scrollTarget.value = getScrollTarget();
-  // TODO 节流待改进
-  scrollTarget.value.addEventListener('scroll', () => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      handleScroll();
-    }, 100);
-  });
+  scrollTarget.value.addEventListener('scroll', throttle(handleScroll, 300));
 });
 </script>