auto-scroll active nav item view

Author: Chemaclass

static/scroll-active-nav.js

@@ -0,0 +1,28 @@
+/**
+ * Scroll the active navigation item into view on page load
+ */
+(function() {
+  'use strict';
+
+  function scrollActiveNavIntoView() {
+    // Find the active navigation item in the sidebar
+    const activeNavItem = document.querySelector('.site-navigation__entry.active');
+
+    if (activeNavItem) {
+      // Scroll it into view with some padding
+      activeNavItem.scrollIntoView({
+        behavior: 'auto',
+        block: 'center',
+        inline: 'nearest'
+      });
+    }
+  }
+
+  // Run when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', scrollActiveNavIntoView);
+  } else {
+    // DOM is already ready
+    scrollActiveNavIntoView();
+  }
+})();

templates/base.html

@@ -45,6 +45,7 @@
   <script type="text/javascript" src="{{ get_url(path='mobile-menu.js') }}"></script>
   <script type="text/javascript" src="{{ get_url(path='dark-mode.js') }}"></script>
   <script type="text/javascript" src="{{ get_url(path='sidebar-toggle.js') }}"></script>
+  <script type="text/javascript" src="{{ get_url(path='scroll-active-nav.js') }}"></script>
   <script type="text/javascript" src="{{ get_url(path='copy-code.js') }}" defer></script>
   <script type="text/javascript" src="{{ get_url(path='elasticlunr.min.js') }}" defer></script>
   <script type="text/javascript" src="{{ get_url(path='api_search.js') }}" defer></script>