fix: include fixed header height for scroll to

virtualansh · Aug 22, 2023 · fb289cc · fb289cc
1 parent d1ca38c
commit fb289cc
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/hooks/useJumpToEle.ts b/src/hooks/useJumpToEle.ts
@@ -17,12 +17,14 @@ export default function useJumpToEle() {
     return offsetTop
   }
 
+  // -31 for top padding of the app container
+  // -81 for fixed header
   const jumpToEle = (id: string) => {
     element.value = document.getElementById(id)
     if (element.value) {
       elementOffsetTop.value =
         element.value && element.value instanceof HTMLElement
-          ? getOffsetTop(element.value) - 30
+          ? getOffsetTop(element.value) - 30 - 81
           : 0
     }
     window.scrollTo({

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -73,7 +73,7 @@ const router = createRouter({
     return new Promise(resolve => {
       if (to.hash) {
         setTimeout(() => {
-          resolve({ el: to.hash, behavior: 'smooth' })
+          resolve({ el: to.hash, behavior: 'smooth', top: 81 })
         }, 1500)
       } else if (savedPosition) {
         resolve(savedPosition)