From a9a8c6f7c51793fbc4727ca409ae52d89ea7e8ca Mon Sep 17 00:00:00 2001 From: Colton Padden Date: Thu, 21 Oct 2021 10:36:59 -0400 Subject: [PATCH] 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 --- .changeset/dull-news-visit.md | 5 +++++ plugins/techdocs/src/reader/components/Reader.tsx | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/dull-news-visit.md diff --git a/.changeset/dull-news-visit.md b/.changeset/dull-news-visit.md new file mode 100644 index 0000000000..e1fab41ebf --- /dev/null +++ b/.changeset/dull-news-visit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Reader will now scroll to the top of the page when navigating between pages diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 7307961772..9bb0a7bbad 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -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(); } }, }),