From ee25a7b060c80b9d78d395027087ae9b64658112 Mon Sep 17 00:00:00 2001 From: Mohit5Upadhyay Date: Mon, 7 Jul 2025 16:10:19 +0530 Subject: [PATCH 1/4] feat(#1932): implement smooth scrolling for anchor navigation across site --- js/app.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/js/app.js b/js/app.js index 2418c2f3a9..08f0f8ca67 100644 --- a/js/app.js +++ b/js/app.js @@ -1,12 +1,56 @@ $(function(){ var doc = $(document); + // Configuration for smooth scrolling + var scrollDuration = 500; + var headerOffset = 120; + + // Smooth scroll function + function smoothScrollToElement(target) { + var $target = $(target); + + // Handle IDs with dots (like express.urlencoded) + if (!$target.length && typeof target === 'string' && target.indexOf('.') > -1) { + var targetId = target.replace('#', ''); + $target = $('[id="' + targetId + '"]'); + } + + if ($target.length) { + $('html, body').animate({ + scrollTop: $target.offset().top - headerOffset + }, scrollDuration); + return true; + } + return false; + } + // top link $('#top').click(function(e){ $('html, body').animate({scrollTop : 0}, 500); return false; }); + // Smooth scrolling for all anchor links + $(document).on('click', 'a[href^="#"]:not([href="#"]):not([href="#top"])', function(e) { + var href = $(this).attr('href'); + if (smoothScrollToElement(href)) { + e.preventDefault(); + // Update URL after scroll + if (history.pushState) { + history.pushState(null, null, href); + } + } + }); + + // Handle direct hash navigation on page load + $(window).on('load', function() { + if (window.location.hash) { + setTimeout(function() { + smoothScrollToElement(window.location.hash); + }, 300); + } + }); + // scrolling links var added; doc.scroll(function(e){ From 736831ce8dfa400e374dd63f7efbb037a3f06db6 Mon Sep 17 00:00:00 2001 From: Mohit5Upadhyay Date: Sat, 12 Jul 2025 21:22:07 +0530 Subject: [PATCH 2/4] feat: implement CSS-only smooth scrolling for anchor navigation --- css/style.css | 19 ++++++++++++++----- js/app.js | 44 -------------------------------------------- 2 files changed, 14 insertions(+), 49 deletions(-) diff --git a/css/style.css b/css/style.css index 86e124fe4b..3a2a8509bf 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,20 @@ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; + scroll-behavior: smooth; +} + +/* handle header offset with scroll-margin */ +h1, h2, h3, h4, h5, h6, +[id] { + scroll-margin-top: 120px; +} + +/* Respect user motion preferences for access */ +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } } body { @@ -264,11 +278,6 @@ a { padding-top: 40px; } -#api-doc *:target, #page-doc *:target { - margin-top: -120px; - padding-top: 120px; - z-index: -1; -} /* logo */ .logo-container a { diff --git a/js/app.js b/js/app.js index 08f0f8ca67..2418c2f3a9 100644 --- a/js/app.js +++ b/js/app.js @@ -1,56 +1,12 @@ $(function(){ var doc = $(document); - // Configuration for smooth scrolling - var scrollDuration = 500; - var headerOffset = 120; - - // Smooth scroll function - function smoothScrollToElement(target) { - var $target = $(target); - - // Handle IDs with dots (like express.urlencoded) - if (!$target.length && typeof target === 'string' && target.indexOf('.') > -1) { - var targetId = target.replace('#', ''); - $target = $('[id="' + targetId + '"]'); - } - - if ($target.length) { - $('html, body').animate({ - scrollTop: $target.offset().top - headerOffset - }, scrollDuration); - return true; - } - return false; - } - // top link $('#top').click(function(e){ $('html, body').animate({scrollTop : 0}, 500); return false; }); - // Smooth scrolling for all anchor links - $(document).on('click', 'a[href^="#"]:not([href="#"]):not([href="#top"])', function(e) { - var href = $(this).attr('href'); - if (smoothScrollToElement(href)) { - e.preventDefault(); - // Update URL after scroll - if (history.pushState) { - history.pushState(null, null, href); - } - } - }); - - // Handle direct hash navigation on page load - $(window).on('load', function() { - if (window.location.hash) { - setTimeout(function() { - smoothScrollToElement(window.location.hash); - }, 300); - } - }); - // scrolling links var added; doc.scroll(function(e){ From 9ce8ec4904b6b457bd3fa9143df79a6abd59d74c Mon Sep 17 00:00:00 2001 From: Mohit5Upadhyay Date: Tue, 15 Jul 2025 13:39:23 +0530 Subject: [PATCH 3/4] apply reviewer changes: Update scroll-margin-top to 60px and remove preventDefault for TOC links --- css/style.css | 2 +- js/menu.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 3a2a8509bf..a3cd96c0c6 100644 --- a/css/style.css +++ b/css/style.css @@ -7,7 +7,7 @@ /* handle header offset with scroll-margin */ h1, h2, h3, h4, h5, h6, [id] { - scroll-margin-top: 120px; + scroll-margin-top: 60px; } /* Respect user motion preferences for access */ diff --git a/js/menu.js b/js/menu.js index 4b46b66641..4a27e9bcb4 100644 --- a/js/menu.js +++ b/js/menu.js @@ -183,7 +183,6 @@ toggleBtn?.addEventListener("click", (e) => { // Open/Close sub TOC content on click document.querySelectorAll("#menu > li > a").forEach((link) => { link.addEventListener("click", function (event) { - event.preventDefault(); // stop navigation to submenu // Find the closest parent
  • const closestLiParent = link.closest("li"); From 48aed9eb2ff15989ff362b01363357d41fa7dbc2 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Fri, 1 Aug 2025 19:56:03 -0500 Subject: [PATCH 4/4] remove scroll to top functionality and prevent default navigation for submenu links Signed-off-by: Sebastian Beltran --- js/app.js | 11 ----------- js/menu.js | 3 ++- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/js/app.js b/js/app.js index ea24dc2f4c..0d779d8062 100644 --- a/js/app.js +++ b/js/app.js @@ -11,17 +11,6 @@ if (langDisplay) { langDisplay.textContent = matchedLang ? matchedLang.name : 'English'; } -// scroll to top of the page -if (scrollToTopBtn) { - scrollToTopBtn.addEventListener("click", function (e) { - e.preventDefault(); - window.scrollTo({ - top: 0, - behavior: "smooth" - }) - }) -} - // add/remove class 'scroll' on scroll by 5px const scrollTarget = document.querySelector('.logo-container'); const scrollObserver = new IntersectionObserver( diff --git a/js/menu.js b/js/menu.js index 0cffa484e0..c617727f0c 100644 --- a/js/menu.js +++ b/js/menu.js @@ -186,7 +186,8 @@ toggleBtn?.addEventListener("click", (e) => { // Open/Close sub TOC content on click document.querySelectorAll("#menu > li > a").forEach((link) => { link.addEventListener("click", function (event) { - + event.preventDefault(); // stop navigation to submenu + // Find the closest parent
  • const closestLiParent = link.closest("li"); const childUlSubMenu = closestLiParent.children[1];