refactor(components): [backtop] use scrollTo with smooth (#11103)

packages/components/backtop/src/use-backtop.ts

@@ -1,7 +1,6 @@
 import { onMounted, ref, shallowRef } from 'vue'
 import { useEventListener, useThrottleFn } from '@vueuse/core'
-import { easeInOutCubic, throwError } from '@element-plus/utils'
-
+import { throwError } from '@element-plus/utils'
 import type { SetupContext } from 'vue'
 import type { BacktopEmits, BacktopProps } from './backtop'
 
@@ -14,30 +13,12 @@ export const useBackTop = (
   const container = shallowRef<Document | HTMLElement>()
   const visible = ref(false)
 
-  const scrollToTop = () => {
-    // TODO: use https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo, with behavior: 'smooth'
-
-    if (!el.value) return
-    const beginTime = Date.now()
-    const beginValue = el.value.scrollTop
-    const frameFunc = () => {
-      if (!el.value) return
-      const progress = (Date.now() - beginTime) / 500
-      if (progress < 1) {
-        el.value.scrollTop = beginValue * (1 - easeInOutCubic(progress))
-        requestAnimationFrame(frameFunc)
-      } else {
-        el.value.scrollTop = 0
-      }
-    }
-    requestAnimationFrame(frameFunc)
-  }
   const handleScroll = () => {
     if (el.value) visible.value = el.value.scrollTop >= props.visibilityHeight
   }
 
   const handleClick = (event: MouseEvent) => {
-    scrollToTop()
+    el.value?.scrollTo({ top: 0, behavior: 'smooth' })
     emit('click', event)
   }
 

packages/utils/__tests__/animation.test.ts

@@ -1,16 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { cubic, easeInOutCubic } from '..'
-
-describe('animation', () => {
-  it('cubic should work', () => {
-    expect(cubic(1)).toMatchInlineSnapshot('1')
-    expect(cubic(5)).toMatchInlineSnapshot('125')
-    expect(cubic(10)).toMatchInlineSnapshot('1000')
-  })
-
-  it('easeInOutCubic should work', () => {
-    expect(easeInOutCubic(1)).toMatchInlineSnapshot('1')
-    expect(easeInOutCubic(0.8).toFixed(4)).toMatchInlineSnapshot('"0.9680"')
-    expect(easeInOutCubic(0.4).toFixed(4)).toMatchInlineSnapshot('"0.2560"')
-  })
-})

packages/utils/animation.ts

@@ -1,6 +0,0 @@
-export const cubic = (value: number): number => {
-  return value ** 3
-}
-
-export const easeInOutCubic = (value: number): number =>
-  value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2

packages/utils/index.ts

@@ -1,7 +1,6 @@
 // Internal code, don't use in your app!
 export * from './dom'
 export * from './vue'
-export * from './animation'
 export * from './arrays'
 export * from './browser'
 export * from './error'