Skip to content

Commit de12edc

Browse files
Mohit5UpadhyayShubhamOulkarbjohansebas
authored
feat(#1932): implement smooth scrolling for anchor navigation across site (#1965)
* feat(#1932): implement smooth scrolling for anchor navigation across site * feat: implement CSS-only smooth scrolling for anchor navigation * apply reviewer changes: Update scroll-margin-top to 60px and remove preventDefault for TOC links * remove scroll to top functionality and prevent default navigation for submenu links Signed-off-by: Sebastian Beltran <[email protected]> --------- Co-authored-by: ShubhamOulkar <[email protected]> Co-authored-by: bjohansebas <[email protected]>
1 parent 76bbf94 commit de12edc

File tree

3 files changed

+16
-18
lines changed

3 files changed

+16
-18
lines changed

css/style.css

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
* {
22
box-sizing: border-box;
33
-webkit-tap-highlight-color: transparent;
4+
scroll-behavior: smooth;
5+
}
6+
7+
/* handle header offset with scroll-margin */
8+
h1, h2, h3, h4, h5, h6,
9+
[id] {
10+
scroll-margin-top: 60px;
11+
}
12+
13+
/* Respect user motion preferences for access */
14+
@media (prefers-reduced-motion: reduce) {
15+
html {
16+
scroll-behavior: auto;
17+
}
418
}
519

620
body {
@@ -258,11 +272,6 @@ a {
258272
padding-top: 40px;
259273
}
260274

261-
#api-doc *:target, #page-doc *:target {
262-
margin-top: -120px;
263-
padding-top: 120px;
264-
z-index: -1;
265-
}
266275

267276
/* logo */
268277
.logo-container a {

js/app.js

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,6 @@ if (langDisplay) {
1111
langDisplay.textContent = matchedLang ? matchedLang.name : 'English';
1212
}
1313

14-
// scroll to top of the page
15-
if (scrollToTopBtn) {
16-
scrollToTopBtn.addEventListener("click", function (e) {
17-
e.preventDefault();
18-
window.scrollTo({
19-
top: 0,
20-
behavior: "smooth"
21-
})
22-
})
23-
}
24-
2514
// add/remove class 'scroll' on scroll by 5px
2615
const scrollTarget = document.querySelector('.logo-container');
2716
const scrollObserver = new IntersectionObserver(

js/menu.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,8 +186,8 @@ toggleBtn?.addEventListener("click", (e) => {
186186
// Open/Close sub TOC content on click
187187
document.querySelectorAll("#menu > li > a").forEach((link) => {
188188
link.addEventListener("click", function (event) {
189-
event.preventDefault(); // stop navigation to submenu
190-
189+
event.preventDefault(); // stop navigation to submenu
190+
191191
// Find the closest parent <li>
192192
const closestLiParent = link.closest("li");
193193
const childUlSubMenu = closestLiParent.children[1];

0 commit comments

Comments
 (0)