diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index d6c7321930d9..3237725f7e96 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 VPSidebarItem from './VPSidebarItem.vue'
 
@@ -25,6 +25,11 @@ watch(
   },
   { immediate: true, flush: 'post' }
 )
+
+// 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 ff9eca2746ba..f488e6faff64 100644
--- a/src/client/theme-default/composables/outline.ts
+++ b/src/client/theme-default/composables/outline.ts
@@ -197,6 +197,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 {