From b83dc88243104cc28e56e8adf40933e31c15d204 Mon Sep 17 00:00:00 2001 From: mich-elle-luna Date: Wed, 15 Oct 2025 14:49:15 -0700 Subject: [PATCH] Fix sidebar auto-scroll to correctly target scrollable container - Use closest() to find the actual scrollable UL container - Calculate position relative to the scrollable container, not the sidebar - Use getBoundingClientRect() for accurate positioning - Position active link near the top with 20px padding for visibility - Fixes issue where scroll didn't work correctly for Develop/Operate/Integrate - Fixes Commands section scrolling too far This improves the previous implementation by targeting the correct overflow-y-auto UL element that actually scrolls, rather than trying to scroll the sidebar nav element itself. --- layouts/partials/docs-nav.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/layouts/partials/docs-nav.html b/layouts/partials/docs-nav.html index ea71ba1543..f43213dd9f 100644 --- a/layouts/partials/docs-nav.html +++ b/layouts/partials/docs-nav.html @@ -204,6 +204,27 @@ const sidebar = document.getElementById('sidebar'); const footer = document.querySelector('footer'); + // Scroll sidebar to show active page on load + const activeLink = sidebar.querySelector('a.active'); + if (activeLink) { + // Find the scrollable UL container that contains the active link + const scrollContainer = activeLink.closest('ul.overflow-y-auto'); + + if (scrollContainer) { + // Get the position of the active link relative to its scrollable container + const linkRect = activeLink.getBoundingClientRect(); + const containerRect = scrollContainer.getBoundingClientRect(); + + // Calculate how far the link is from the top of the container + const relativeTop = linkRect.top - containerRect.top + scrollContainer.scrollTop; + + // Scroll so the active link appears near the top (with some padding) + const scrollPosition = relativeTop - 20; // 20px padding from top + + scrollContainer.scrollTop = Math.max(0, scrollPosition); + } + } + window.addEventListener('scroll', function() { const scrolledHeight = window.scrollY + window.innerHeight; if (scrolledHeight >= footer.offsetTop) {