fix: scroll to anchor not working when navigating to a different page (…

…#2077) * fix: scroll to anchor not working when navigating to a different page * chore: changeset
commercetools · Sep 11, 2024 · aa25be9 · aa25be9
1 parent 5f7ed85
commit aa25be9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/khaki-ghosts-know.md b/.changeset/khaki-ghosts-know.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+'@commercetools-website/docs-smoke-test': patch
+---
+
+Fix anchor navigation between pages
diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-application.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-application.js
@@ -13,6 +13,9 @@ const Root = styled.div`
   position: relative;
   width: 100vw;
   height: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; /* enables "momentum" style scrolling */
 
   scroll-padding-top: ${(props) =>
     props.isGlobalNotificationVisible

diff --git a/websites/docs-smoke-test/src/content/views/links.mdx b/websites/docs-smoke-test/src/content/views/links.mdx
@@ -71,12 +71,12 @@ timeToRead: 5
 ### Link to another page on this site with a specific anchor a page on this site
 
 ```md
-[Link](/#links)
+[Link](/views/markdown#subsection-first-level)
 ```
 
 | Link            | Type          | Expected outcome                                                                                  |
 | --------------- | ------------- | ------------------------------------------------------------------------------------------------- |
-| [Link](/#links) | `gatsby-link` | It should be a Gatsby link, history navigation, and directly jump to the anchor element position. |
+| [Link](/views/markdown#subsection-first-level) | `gatsby-link` | It should be a Gatsby link, history navigation, and directly jump to the anchor element position. |
 
 ### Link to another page on this site using a relative upwards traversal path