refactor: implement consistent back-to-top function

src/components/Topbar/TopbarFavoritesPop.vue

@@ -2,7 +2,7 @@
 import type { Ref } from 'vue'
 import { onMounted, reactive, ref, watch } from 'vue'
 import type { FavoriteCategory, FavoriteResource } from './types'
-import { getUserID, removeHttpFromUrl } from '~/utils/main'
+import { getUserID, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 
 const favoriteCategories = reactive<Array<FavoriteCategory>>([])
@@ -30,7 +30,7 @@ watch(activatedMediaId, (newVal: number, oldVal: number) => {
 
   favoriteResources.length = 0
   if (favoriteVideosWrap.value)
-    scrollToTop(favoriteVideosWrap.value, 300)
+    smoothScrollToTop(favoriteVideosWrap.value, 300)
 
   getFavoriteResources(newVal, 1)
 })
@@ -121,32 +121,6 @@ function changeCategory(categoryItem: FavoriteCategory) {
   activatedMediaId.value = categoryItem.id
   activatedFavoriteTitle.value = categoryItem.title
 }
-
-/**
- * smooth scroll to the top of the html element
- */
-function scrollToTop(element: HTMLElement, duration: number) {
-  // cancel if already on top
-  if (element.scrollTop === 0)
-    return
-
-  const cosParameter = element.scrollTop / 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 = 0)
-      element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
-    }
-    oldTimestamp = newTimestamp
-    window.requestAnimationFrame(step)
-  }
-  window.requestAnimationFrame(step)
-}
 </script>
 
 <template>
@@ -170,7 +144,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       un-border="!rounded-t-$bew-radius"
       backdrop-glass
     >
-      <h3 cursor="pointer" font-600 @click="scrollToTop(favoriteVideosWrap, 300)">
+      <h3 cursor="pointer" font-600 @click="smoothScrollToTop(favoriteVideosWrap, 300)">
         {{ activatedFavoriteTitle }}
       </h3>
 

src/components/Topbar/TopbarHistoryPop.vue

@@ -5,7 +5,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { useDateFormat } from '@vueuse/core'
 import type { HistoryItem } from './types'
 import { HistoryType } from './types'
-import { removeHttpFromUrl } from '~/utils/main'
+import { removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 
 const { t } = useI18n()
@@ -44,7 +44,7 @@ watch(activatedTab, (newVal: number, oldVal: number) => {
 
   historys.length = 0
   if (historysWrap.value)
-    scrollToTop(historysWrap.value, 300)
+    smoothScrollToTop(historysWrap.value, 300)
 
   if (newVal === 0) {
     getHistoryList(HistoryType.Archive)
@@ -153,32 +153,6 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
       isLoading.value = false
     })
 }
-
-/**
- * smooth scroll to the top of the html element
- */
-function scrollToTop(element: HTMLElement, duration: number) {
-  // cancel if already on top
-  if (element.scrollTop === 0)
-    return
-
-  const cosParameter = element.scrollTop / 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 = 0)
-      element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
-    }
-    oldTimestamp = newTimestamp
-    window.requestAnimationFrame(step)
-  }
-  window.requestAnimationFrame(step)
-}
 </script>
 
 <template>

src/components/Topbar/TopbarMomentsPop.vue

@@ -5,7 +5,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
 import { MomentType } from './types'
 import type { MomentItem } from './types'
-import { getUserID } from '~/utils/main'
+import { getUserID, smoothScrollToTop } from '~/utils/main'
 import { calcTimeSince } from '~/utils/dataFormatter'
 
 const { t } = useI18n()
@@ -42,7 +42,7 @@ watch(selectedTab, (newVal: number, oldVal: number) => {
     return
 
   if (momentsWrap.value)
-    scrollToTop(momentsWrap.value, 300)
+    smoothScrollToTop(momentsWrap.value, 300)
   moments.length = 0
   if (newVal === 0) {
     getNewMoments([MomentType.Video, MomentType.Bangumi])
@@ -240,32 +240,6 @@ function pushItemIntoMoments(item: any) {
     } as MomentItem)
   }
 }
-
-/**
- * smooth scroll to the top of the html element
- */
-function scrollToTop(element: HTMLElement, duration: number) {
-  // cancel if already on top
-  if (element.scrollTop === 0)
-    return
-
-  const cosParameter = element.scrollTop / 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 = 0)
-      element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
-    }
-    oldTimestamp = newTimestamp
-    window.requestAnimationFrame(step)
-  }
-  window.requestAnimationFrame(step)
-}
 </script>
 
 <template>