From 11a76961ee8cfc090a3078fb3f465da0b0b219dd Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 13 Mar 2024 17:40:45 +0100
Subject: [PATCH 1/2] feat: scroll active sidebar link into view on page load

---
 src/client/theme-default/components/VPSidebar.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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>

From eb7498b3dcdd8856792082cfeee2694d2a97a1fd Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 13 Mar 2024 17:41:05 +0100
Subject: [PATCH 2/2] feat: scroll active outline marker into view on
 activation

---
 src/client/theme-default/composables/outline.ts | 1 +
 1 file changed, 1 insertion(+)

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 {