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

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
+      ])
   }
 })

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)

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 class="content" />
-        <Content />
-      </div>
-
       <PageFooter />
-
       <NextAndPrevLinks />
 
       <slot name="bottom" />