diff --git a/packages/histoire/package.json b/packages/histoire/package.json
index cb23fc28..2fded61b 100644
--- a/packages/histoire/package.json
+++ b/packages/histoire/package.json
@@ -60,6 +60,7 @@
     "picocolors": "^1.0.0",
     "pinia": "^2.0.11",
     "sade": "^1.8.1",
+    "scroll-into-view-if-needed": "^2.2.29",
     "shiki": "^0.10.1",
     "vite-node": "^0.3.6",
     "vue-router": "^4.0.12"
diff --git a/packages/histoire/src/client/app/components/story/StoryListItem.vue b/packages/histoire/src/client/app/components/story/StoryListItem.vue
index 44e75c16..1d5135d1 100644
--- a/packages/histoire/src/client/app/components/story/StoryListItem.vue
+++ b/packages/histoire/src/client/app/components/story/StoryListItem.vue
@@ -2,7 +2,9 @@
 import type { Story } from '../../types'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
 import { Icon } from '@iconify/vue'
-import { computed, withDefaults } from 'vue'
+import { computed, ref, withDefaults } from 'vue'
+import { useRoute } from 'vue-router'
+import { useScrollOnActive } from '../../util/scroll.js'
 
 const props = withDefaults(defineProps<{
   story: Story
@@ -14,10 +16,15 @@ const props = withDefaults(defineProps<{
 const filePadding = computed(() => {
   return (props.depth * 16) + 'px'
 })
+
+const route = useRoute()
+const active = computed(() => route.params.storyId === props.story.id)
+const el = ref<HTMLDivElement>()
+useScrollOnActive(active, el)
 </script>
 
 <template>
-  <div>
+  <div ref="el">
     <BaseListItemLink
       v-slot="{ active }"
       :to="{
diff --git a/packages/histoire/src/client/app/components/story/StoryVariantListItem.vue b/packages/histoire/src/client/app/components/story/StoryVariantListItem.vue
index 6c04f5f5..852ca0a8 100644
--- a/packages/histoire/src/client/app/components/story/StoryVariantListItem.vue
+++ b/packages/histoire/src/client/app/components/story/StoryVariantListItem.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { PropType, toRefs } from 'vue'
+import { PropType, ref, toRefs } from 'vue'
 import { useCurrentVariantRoute } from '../../util/variant'
 import type { Variant } from '../../types'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
 import { Icon } from '@iconify/vue'
+import { useScrollOnActive } from '../../util/scroll.js'
 
 const props = defineProps({
   variant: {
@@ -14,10 +15,12 @@ const props = defineProps({
 
 const { variant } = toRefs(props)
 const { isActive, targetRoute } = useCurrentVariantRoute(variant)
+const el = ref<HTMLDivElement>()
+useScrollOnActive(isActive, el)
 </script>
 
 <template>
-  <div>
+  <div ref="el">
     <BaseListItemLink
       v-slot="{ active }"
       :to="targetRoute"
diff --git a/packages/histoire/src/client/app/util/scroll.ts b/packages/histoire/src/client/app/util/scroll.ts
new file mode 100644
index 00000000..0eebbed4
--- /dev/null
+++ b/packages/histoire/src/client/app/util/scroll.ts
@@ -0,0 +1,27 @@
+import { watch, onMounted, Ref } from 'vue'
+import scrollIntoView from 'scroll-into-view-if-needed'
+
+export function useScrollOnActive (active: Ref<boolean>, el: Ref<HTMLElement>) {
+  watch(active, value => {
+    if (value) {
+      autoScroll()
+    }
+  })
+
+  function autoScroll () {
+    if (el.value) {
+      scrollIntoView(el.value, {
+        scrollMode: 'if-needed',
+        block: 'center',
+        inline: 'nearest',
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  onMounted(() => {
+    if (active.value) {
+      autoScroll()
+    }
+  })
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dec348b5..031fc027 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,7 @@ importers:
       postcss: ^8.4.6
       postcss-import: ^14.0.2
       sade: ^1.8.1
+      scroll-into-view-if-needed: ^2.2.29
       shiki: ^0.10.1
       tailwindcss: ^3.0.23
       typescript: ^4.5.5
@@ -126,6 +127,7 @@ importers:
       picocolors: 1.0.0
       pinia: 2.0.11_typescript@4.5.5+vue@3.2.31
       sade: 1.8.1
+      scroll-into-view-if-needed: 2.2.29
       shiki: 0.10.1
       vite-node: 0.3.6
       vue-router: 4.0.12_vue@3.2.31
@@ -1992,6 +1994,10 @@ packages:
       dot-prop: 5.3.0
     dev: true
 
+  /compute-scroll-into-view/1.0.17:
+    resolution: {integrity: sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==}
+    dev: false
+
   /concat-map/0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     dev: true
@@ -5184,6 +5190,12 @@ packages:
   /safer-buffer/2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  /scroll-into-view-if-needed/2.2.29:
+    resolution: {integrity: sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==}
+    dependencies:
+      compute-scroll-into-view: 1.0.17
+    dev: false
+
   /semver/5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true