#3209 Make the sidebar scroll into view of the active item

Signed-off-by: James Hunt <[email protected]>
cncf · Dec 29, 2024 · 040e14b · 040e14b
1 parent ad4651a
commit 040e14b
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
@@ -77,13 +77,17 @@
 {{- end }}
 
 <script>
-	document.addEventListener("DOMContentLoaded", function () {
-	  const activeLink = document.querySelector(".td-sidebar-nav__section .active");
-	  if (activeLink) {
-		activeLink.scrollIntoView({
-		  behavior: "smooth",
-		  block: "center",
-		});
-	  }
-	});
-	</script>
+document.addEventListener("DOMContentLoaded", function () {
+  const sidebar = document.querySelector("#td-section-nav"); 
+  const activeLink = sidebar?.querySelector(".td-sidebar-nav__section .active"); 
+
+  if (activeLink && sidebar) {
+    const sidebarTop = sidebar.scrollTop; 
+    const activeLinkOffset = activeLink.offsetTop; 
+    sidebar.scrollTo({
+      top: activeLinkOffset - sidebar.clientHeight / 2 + activeLink.offsetHeight / 2,
+      behavior: "smooth",
+    });
+  }
+});
+</script>