diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 35fa7838..560ee2b9 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
-import { ref, watch } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import { useSidebar } from '../composables/sidebar'
 import VPSidebarGroup from './VPSidebarGroup.vue'
 
@@ -35,6 +35,11 @@ watch(
   },
   { deep: true }
 )
+
+// scroll active link into view
+onMounted(() => {
+  nextTick(() => navEl.value?.querySelector('.is-active')?.scrollIntoView({ block: 'center'}))
+})
 </script>
 
 <template>
diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts
index 74e72a0f..46fb2643 100644
--- a/src/client/theme-default/composables/outline.ts
+++ b/src/client/theme-default/composables/outline.ts
@@ -168,6 +168,7 @@ export function useActiveAnchor(
 
     if (activeLink) {
       activeLink.classList.add('active')
+      activeLink.scrollIntoView({ behavior: 'smooth', block: 'center' })
       marker.value.style.top = activeLink.offsetTop + 39 + 'px'
       marker.value.style.opacity = '1'
     } else {