refactor: use a new method to reimplement the scroll-top-top function

src/components/TopBar/components/FavoritesPop.vue

@@ -6,7 +6,7 @@ import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import { useApiClient } from '~/composables/api'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import { getUserID, isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
+import { getUserID, isHomePage, removeHttpFromUrl, scrollToTop } from '~/utils/main'
 
 import type { FavoriteCategory, FavoriteResource } from '../types'
 
@@ -40,7 +40,7 @@ watch(activatedMediaId, (newVal: number, oldVal: number) => {
 
   favoriteResources.length = 0
   if (favoriteVideosWrap.value)
-    smoothScrollToTop(favoriteVideosWrap.value, 300)
+    scrollToTop(favoriteVideosWrap.value)
 
   currentPageNum.value = 1
   getFavoriteResources()

src/components/TopBar/components/HistoryPop.vue

@@ -11,7 +11,7 @@ import { useApiClient } from '~/composables/api'
 import type { HistoryResult, List as HistoryItem } from '~/models/history/history'
 import { Business } from '~/models/history/history'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import { isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
+import { isHomePage, removeHttpFromUrl, scrollToTop } from '~/utils/main'
 
 const { t } = useI18n()
 const api = useApiClient()
@@ -49,7 +49,7 @@ watch(activatedTab, (newVal: number | undefined, oldVal: number | undefined) =>
 
   historys.length = 0
   if (historysWrap.value)
-    smoothScrollToTop(historysWrap.value, 300)
+    scrollToTop(historysWrap.value)
 
   if (newVal === 0) {
     getHistoryList(Business.ARCHIVE)

src/components/TopBar/components/MomentsPop.vue

@@ -8,7 +8,7 @@ import Tooltip from '~/components/Tooltip.vue'
 import { useApiClient } from '~/composables/api'
 import type { TopBarLiveMomentResult } from '~/models/moment/topBarLiveMoment'
 import type { TopBarMomentResult } from '~/models/moment/topBarMoment'
-import { getCSRF, isHomePage, smoothScrollToTop } from '~/utils/main'
+import { getCSRF, isHomePage, scrollToTop } from '~/utils/main'
 
 type MomentType = 'video' | 'live' | 'article'
 interface MomentTab { type: MomentType, name: any }
@@ -56,7 +56,7 @@ watch(() => selectedMomentTab.value.type, (newVal, oldVal) => {
     return
 
   if (momentsWrap.value)
-    smoothScrollToTop(momentsWrap.value, 300)
+    scrollToTop(momentsWrap.value)
 
   initData()
 }, { immediate: true })

src/contentScripts/views/App.vue

@@ -15,7 +15,7 @@ import type { BewlyAppProvider } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
 import { AppPage, LanguageType } from '~/enums/appEnums'
 import { accessKey, settings } from '~/logic'
-import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
+import { getUserID, hexToRGBA, isHomePage, scrollToTop } from '~/utils/main'
 
 const { isDark } = useDark()
 const activatedPage = ref<AppPage>(settings.value.dockItemVisibilityList.find(e => e.visible === true)?.page ?? AppPage.Home)
@@ -194,7 +194,7 @@ function setAppThemeColor() {
 function handleBackToTop(targetScrollTop = 0 as number) {
   const osInstance = scrollbarRef.value?.osInstance()
 
-  smoothScrollToTop(osInstance.elements().viewport, 300, targetScrollTop)
+  scrollToTop(osInstance.elements().viewport, targetScrollTop)
   topBarRef.value?.toggleTopBarVisible(true)
 }
 

src/utils/main.ts

@@ -68,27 +68,15 @@ export function hexToRGBA(hex: string, alpha: number): string {
 /**
  * Smooth scroll to the top of the html element
  */
-export function smoothScrollToTop(element: HTMLElement, duration: number, targetScrollTop = 0 as number) {
+export function scrollToTop(element: HTMLElement, targetScrollTop = 0 as number) {
   // cancel if already on top
   if (element.scrollTop === targetScrollTop)
     return
 
-  const cosParameter = (element.scrollTop - targetScrollTop) / 2
-  let scrollCount = 0
-  let oldTimestamp = 0
-
-  function step(newTimestamp: number) {
-    if (oldTimestamp !== 0) {
-      // if duration is 0 scrollCount will be Infinity
-      scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
-      if (scrollCount >= Math.PI)
-        return (element.scrollTop = targetScrollTop)
-      element.scrollTop = targetScrollTop + cosParameter + cosParameter * Math.cos(scrollCount)
-    }
-    oldTimestamp = newTimestamp
-    window.requestAnimationFrame(step)
-  }
-  window.requestAnimationFrame(step)
+  element.scrollTo({
+    top: targetScrollTop,
+    behavior: 'smooth',
+  })
 }
 
 export function injectCSS(css: string): HTMLStyleElement {