Merge pull request #9572 from circleci/DOCSS-1902-fix-scroll

rosieyohannan · web-flow · commit 04dcf935e415 · 2025-09-08T14:19:31.000+01:00
Fix scroll jumper to account for header correctly
diff --git a/ui/src/css/doc.css b/ui/src/css/doc.css
@@ -28,6 +28,7 @@
   hyphens: none;
   line-height: 1.3;
   margin: 1rem 0 0;
+  scroll-margin-top: calc(var(--navbar-height) + var(--toolbar-height) + 1rem); /* Account for sticky header height */
 }
 
 .doc > h1.page:first-child {
diff --git a/ui/src/js/03-fragment-jumper.js b/ui/src/js/03-fragment-jumper.js
@@ -3,7 +3,7 @@
 
   var article = document.querySelector('article.doc')
   if (!article) return
-  var toolbar = document.querySelector('.toolbar')
+  var toolbar = document.querySelector('header') || document.querySelector('.toolbar')
   var supportsScrollToOptions = 'scrollTo' in document.documentElement
 
   function decodeFragment (hash) {

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@`
`28`	`28`	`hyphens: none;`
`29`	`29`	`line-height: 1.3;`
`30`	`30`	`margin: 1rem 0 0;`
	`31`	`+ scroll-margin-top: calc(var(--navbar-height) + var(--toolbar-height) + 1rem); /* Account for sticky header height */`
`31`	`32`	`}`
`32`	`33`
`33`	`34`	`.doc > h1.page:first-child {`