diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk
index 607742b6..11df8bde 100644
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -11,6 +11,9 @@
     <meta name="description" content="{{ meta.description }}" />
     <title>{{ meta.title }}</title>
 
+    {# Opt out of Turbo caching #}
+    <meta name="turbo-cache-control">
+
     {# Stylesheets #}
     <link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}" />
     <link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}" />
@@ -43,6 +46,9 @@
         document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (!theme && prefersDark));
       })();
     </script>
+
+    {# Turbo + Scroll positioning #}
+    <script type="module" src="{{ assetUrl('scripts/turbo.js') }}"></script>
   </head>
   <body>
     <a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
@@ -82,7 +88,7 @@
       </button>
     </div>
 
-    <aside id="sidebar">
+    <aside id="sidebar" data-preserve-scroll data-turbo-permanent>
       <header>
         <a href="/">
           <img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js
index 36913510..10ac8b44 100644
--- a/docs/assets/scripts/docs.js
+++ b/docs/assets/scripts/docs.js
@@ -45,7 +45,7 @@
 
   // Close when clicking outside of the sidebar
   document.addEventListener('mousedown', event => {
-    if (isSidebarOpen() & !event.target.closest('#sidebar, #menu-toggle')) {
+    if (isSidebarOpen() & !event.target?.closest('#sidebar, #menu-toggle')) {
       event.stopImmediatePropagation();
       toggleSidebar();
     }
diff --git a/docs/assets/scripts/turbo.js b/docs/assets/scripts/turbo.js
new file mode 100644
index 00000000..0cd84bcb
--- /dev/null
+++ b/docs/assets/scripts/turbo.js
@@ -0,0 +1,62 @@
+import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm'
+
+;(() => {
+  if (!window.scrollPositions) {
+    window.scrollPositions = {};
+  }
+
+  function preserveScroll () {
+    document.querySelectorAll("[data-preserve-scroll").forEach((element) => {
+      scrollPositions[element.id] = element.scrollTop;
+    })
+  }
+
+  function restoreScroll () {
+    document.querySelectorAll("[data-preserve-scroll").forEach((element) => {
+      element.scrollTop = scrollPositions[element.id];
+    })
+  }
+
+  window.addEventListener("turbo:before-cache", preserveScroll)
+  window.addEventListener("turbo:before-render", restoreScroll)
+  window.addEventListener("turbo:render", restoreScroll)
+
+  // Do this to prevent jankiness on the sidebar.
+  // make sure it has data-turbo-permanent
+  function normalizePathname(pathname) {
+    // Remove /index.html
+    if (pathname.endsWith('/index.html')) {
+      pathname = pathname.replace(/\/index\.html/, '');
+    }
+
+    // Remove trailing slashes
+    return pathname.replace(/\/$/, '');
+  }
+
+  /**
+  * Adds a class name to links that are currently active.
+  */
+  function markActiveLinks(_event) {
+    const options = {
+      className: 'active-link', // the class to add to active links
+      pathname: document.location.pathname, // the current pathname to compare
+      within: 'body', // element containing the target links
+    };
+
+    const within = document.querySelector(options.within);
+
+    if (!within) {
+      return doc;
+    }
+
+    within.querySelectorAll('a').forEach(link => {
+      if (normalizePathname(options.pathname) === normalizePathname(link.pathname)) {
+        link.classList.add(options.className);
+      }
+    });
+
+    return doc;
+  };
+
+  window.addEventListener("turbo:load", markActiveLinks)
+})()
