From c6126e47020ab1ae0d001866f1420052954eabc1 Mon Sep 17 00:00:00 2001 From: Rene Pfeuffer Date: Thu, 14 Mar 2024 15:05:11 +0100 Subject: [PATCH] Mind offset for top navigation bar on scrolling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This fixes the issue, that links to anchor tags in markdown documents have been scrolled a bit too far, so that the targeted element ended up below the navigation bar. Now, the height of the navigation bar is taken into account. Pushed-by: Rene Pfeuffer Co-authored-by: Thomas Zerr Pushed-by: Thomas Zerr Co-authored-by: René Pfeuffer Committed-by: René Pfeuffer --- gradle/changelog/mind_header_when_scrolling.yaml | 2 ++ scm-ui/ui-components/src/useScrollToElement.ts | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 gradle/changelog/mind_header_when_scrolling.yaml diff --git a/gradle/changelog/mind_header_when_scrolling.yaml b/gradle/changelog/mind_header_when_scrolling.yaml new file mode 100644 index 0000000000..1de338996b --- /dev/null +++ b/gradle/changelog/mind_header_when_scrolling.yaml @@ -0,0 +1,2 @@ +- type: fixed + description: The height of the navigation bar is now considered when scrolling to an element via anchor diff --git a/scm-ui/ui-components/src/useScrollToElement.ts b/scm-ui/ui-components/src/useScrollToElement.ts index 778a69d88b..125f9c2990 100644 --- a/scm-ui/ui-components/src/useScrollToElement.ts +++ b/scm-ui/ui-components/src/useScrollToElement.ts @@ -40,9 +40,12 @@ const useScrollToElement = ( } else { tries++; const element = contentRef.querySelector(elementSelector); - if (element && element.scrollIntoView) { + if (element) { + const headerElement = document.querySelector(".navbar-brand"); + const margin = headerElement ? headerElement.getBoundingClientRect().height : 45; clearInterval(intervalId); - element.scrollIntoView(); + const y = element.getBoundingClientRect().top + window.pageYOffset - margin; + window.scrollTo({top: y}); } } }, 200);