This is an automated email from the ASF dual-hosted git repository.
shuai pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/answer.git
The following commit(s) were added to refs/heads/main by this push:
new 13240bea fix: global handling of anchor jumps
13240bea is described below
commit 13240beac8ab2645588820c7367841f5cb6dea0e
Author: shuai <[email protected]>
AuthorDate: Tue Mar 18 15:15:15 2025 +0800
fix: global handling of anchor jumps
---
ui/src/pages/Layout/index.tsx | 70 ++++++++++++++++++++++++++++++++-
ui/src/pages/Questions/Detail/index.tsx | 68 --------------------------------
2 files changed, 69 insertions(+), 69 deletions(-)
diff --git a/ui/src/pages/Layout/index.tsx b/ui/src/pages/Layout/index.tsx
index 3ed8a8ac..f3384d9c 100644
--- a/ui/src/pages/Layout/index.tsx
+++ b/ui/src/pages/Layout/index.tsx
@@ -39,7 +39,7 @@ import {
HttpErrorContent,
} from '@/components';
import { LoginToContinueModal, BadgeModal } from '@/components/Modal';
-import { changeTheme, Storage } from '@/utils';
+import { changeTheme, Storage, scrollToElementTop } from '@/utils';
import { useQueryNotificationStatus } from '@/services';
import { useExternalToast } from '@/hooks';
import { EXTERNAL_CONTENT_DISPLAY_MODE } from '@/common/constants';
@@ -58,6 +58,74 @@ const Layout: FC = () => {
const { show: showLoginToContinueModal } = loginToContinueStore();
const { data: notificationData } = useQueryNotificationStatus();
+ useEffect(() => {
+ // handle footnote links
+ const fixFootnoteLinks = () => {
+ const footnoteLinks = document.querySelectorAll(
+ 'a[href^="#"]:not([data-footnote-fixed])',
+ );
+
+ footnoteLinks.forEach((link) => {
+ link.setAttribute('data-footnote-fixed', 'true');
+ const href = link.getAttribute('href');
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ const targetId = href?.substring(1) || '';
+ const targetElement = document.getElementById(targetId);
+
+ if (targetElement) {
+ window.history.pushState(null, '', `${location.pathname}${href}`);
+
+ scrollToElementTop(targetElement);
+ }
+ });
+ });
+
+ if (window.location.hash) {
+ const { hash } = window.location;
+ const targetElement = document.getElementById(hash.substring(1));
+
+ if (targetElement) {
+ setTimeout(() => {
+ scrollToElementTop(targetElement);
+ }, 100);
+ }
+ }
+ };
+ fixFootnoteLinks();
+
+ const observer = new MutationObserver(() => {
+ fixFootnoteLinks();
+ });
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true,
+ attributes: true,
+ attributeFilter: ['id', 'href'],
+ });
+
+ const handleHashChange = () => {
+ if (window.location.hash) {
+ const { hash } = window.location;
+ const targetElement = document.getElementById(hash.substring(1));
+
+ if (targetElement) {
+ setTimeout(() => {
+ scrollToElementTop(targetElement);
+ }, 100);
+ }
+ }
+ };
+
+ window.addEventListener('hashchange', handleHashChange);
+
+ return () => {
+ observer.disconnect();
+ window.removeEventListener('hashchange', handleHashChange);
+ };
+ }, [location.pathname]);
+
useEffect(() => {
httpStatusReset();
}, [location]);
diff --git a/ui/src/pages/Questions/Detail/index.tsx
b/ui/src/pages/Questions/Detail/index.tsx
index 6e81b42a..8c8921b8 100644
--- a/ui/src/pages/Questions/Detail/index.tsx
+++ b/ui/src/pages/Questions/Detail/index.tsx
@@ -242,74 +242,6 @@ const Index = () => {
}
}
- useEffect(() => {
- // handle footnote links
- const fixFootnoteLinks = () => {
- const footnoteLinks = document.querySelectorAll(
- 'a[href^="#"]:not([data-footnote-fixed])',
- );
-
- footnoteLinks.forEach((link) => {
- link.setAttribute('data-footnote-fixed', 'true');
- const href = link.getAttribute('href');
- link.addEventListener('click', (e) => {
- e.preventDefault();
- const targetId = href?.substring(1) || '';
- const targetElement = document.getElementById(targetId);
-
- if (targetElement) {
- window.history.pushState(null, '', `${location.pathname}${href}`);
-
- scrollToElementTop(targetElement);
- }
- });
- });
-
- if (window.location.hash) {
- const { hash } = window.location;
- const targetElement = document.getElementById(hash.substring(1));
-
- if (targetElement) {
- setTimeout(() => {
- scrollToElementTop(targetElement);
- }, 100);
- }
- }
- };
- fixFootnoteLinks();
-
- const observer = new MutationObserver(() => {
- fixFootnoteLinks();
- });
-
- observer.observe(document.body, {
- childList: true,
- subtree: true,
- attributes: true,
- attributeFilter: ['id', 'href'],
- });
-
- const handleHashChange = () => {
- if (window.location.hash) {
- const { hash } = window.location;
- const targetElement = document.getElementById(hash.substring(1));
-
- if (targetElement) {
- setTimeout(() => {
- scrollToElementTop(targetElement);
- }, 100);
- }
- }
- };
-
- window.addEventListener('hashchange', handleHashChange);
-
- return () => {
- observer.disconnect();
- window.removeEventListener('hashchange', handleHashChange);
- };
- }, [location.pathname]);
-
return (
<Row className="questionDetailPage pt-4 mb-5">
<Col className="page-main flex-auto">
