fix: avoid scroll behavior reliance on .nav-bar class

vuejs · Jun 16, 2021 · 9b35dfc · 9b35dfc
1 parent 3fed6f9
commit 9b35dfc
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/src/client/app/components/Content.ts b/src/client/app/components/Content.ts
@@ -5,6 +5,9 @@ export const Content = defineComponent({
   name: 'VitePressContent',
   setup() {
     const route = useRoute()
-    return () => (route.component ? h(route.component) : null)
+    return () =>
+      h('div', { style: { position: 'relative' } }, [
+        route.component ? h(route.component) : null
+      ])
   }
 })
diff --git a/src/client/app/router.ts b/src/client/app/router.ts
@@ -172,13 +172,11 @@ export function useRoute(): Route {
 }
 
 function scrollTo(el: HTMLElement, hash: string, smooth = false) {
-  const nav = document.querySelector('.nav-bar')
-  const pageOffset = nav ? (nav as HTMLElement).offsetHeight : 0
   const target = el.classList.contains('.header-anchor')
     ? el
     : document.querySelector(decodeURIComponent(hash))
   if (target) {
-    const targetTop = (target as HTMLElement).offsetTop - pageOffset - 15
+    const targetTop = (target as HTMLElement).offsetTop
     // only smooth scroll if distance is smaller than screen height.
     if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight) {
       window.scrollTo(0, targetTop)

diff --git a/src/client/theme-default/components/Page.vue b/src/client/theme-default/components/Page.vue
@@ -8,12 +8,8 @@ import NextAndPrevLinks from './NextAndPrevLinks.vue'
     <div class="container">
       <slot name="top" />
 
-      <div class="content">
-        <Content />
-      </div>
-
+      <Content class="content" />
       <PageFooter />
-
       <NextAndPrevLinks />
 
       <slot name="bottom" />