Skip to content

feat(#1932): implement smooth scrolling for anchor navigation across site #1965

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: gh-pages
Choose a base branch
from
Open

feat(#1932): implement smooth scrolling for anchor navigation across site #1965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ee25a7b
feat(#1932): implement smooth scrolling for anchor navigation across …
Mohit5Upadhyay Jul 7, 2025
736831c
feat: implement CSS-only smooth scrolling for anchor navigation
Mohit5Upadhyay Jul 12, 2025
9ce8ec4
apply reviewer changes: Update scroll-margin-top to 60px and remove p…
Mohit5Upadhyay Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: 60px;
}

/* Respect user motion preferences for access */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}

body {
Expand Down Expand Up @@ -264,11 +278,6 @@ a {
padding-top: 40px;
}

#api-doc *:target, #page-doc *:target {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I support removing this
since we are using scroll top margin only on headers.

margin-top: -120px;
padding-top: 120px;
z-index: -1;
}

/* logo */
.logo-container a {
Expand Down
1 change: 0 additions & 1 deletion js/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to stay. I've been testing, and on mobile it doesn’t work correctly, with this line, it works.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line stop scrolling to submenu section headings. E.g. Request, Response, etc.
Actually here two scrolling actions happening inside TOC and on the page.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeh on mobile it is very bad experience

Copy link
Member

@ShubhamOulkar ShubhamOulkar Jul 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can stop this on small screens by using line 4 menu.js. Let's focus on desktop. It is important for desktop experience.
@Mohit5Upadhyay could you try to control behavior in side menu bar? Slow down submenu opening ans scrolling. I think we can do this in CSS. 😃


// Find the closest parent <li>
const closestLiParent = link.closest("li");
Expand Down