Scroll to the top of reader content when primary navigation link is clicked

When navigating between pages using the primary sidebar navigation menu,
scroll to the top of the generated markdown content via
`.scrollIntoView()`.

Signed-off-by: Colton Padden <colton.padden@fastmail.com>
This commit is contained in:
Colton Padden
2021-10-21 10:36:59 -04:00
parent b61c50a12f
commit a9a8c6f7c5
2 changed files with 10 additions and 0 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-techdocs': patch
---
Reader will now scroll to the top of the page when navigating between pages
@@ -321,6 +321,7 @@ export const useTechDocsReaderDom = (): Element | null => {
baseUrl: window.location.origin,
onClick: (_: MouseEvent, url: string) => {
const parsedUrl = new URL(url);
// hash exists when anchor is clicked on secondary sidebar
if (parsedUrl.hash) {
navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
// Scroll to hash if it's on the current page
@@ -329,6 +330,10 @@ export const useTechDocsReaderDom = (): Element | null => {
?.scrollIntoView();
} else {
navigate(parsedUrl.pathname);
// Scroll to top of reader if primary sidebar link is clicked
transformedElement
?.querySelector('.md-content__inner')
?.scrollIntoView();
}
},
}),