diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx index 5308c602ce5..52434696bb3 100644 --- a/src/components/Layout/Toc.tsx +++ b/src/components/Layout/Toc.tsx @@ -6,58 +6,134 @@ import cx from 'classnames'; import {useTocHighlight} from './useTocHighlight'; import type {Toc} from '../MDX/TocContext'; +import {useState, useEffect} from 'react'; + +function ScrollToTop() { + const [isVisible, setIsVisible] = useState(false); + + // 控制按钮显示 + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + + // 滚动到顶部 + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }; + + useEffect(() => { + window.addEventListener('scroll', toggleVisibility); + return () => { + window.removeEventListener('scroll', toggleVisibility); + }; + }, []); + + return ( + <> + {isVisible && ( +
+ + + +
+ )} + + ); +} + export function Toc({headings}: {headings: Toc}) { const {currentIndex} = useTocHighlight(); // TODO: We currently have a mismatch between the headings in the document // and the headings we find in MarkdownPage (i.e. we don't find Recap or Challenges). // Select the max TOC item we have here for now, but remove this after the fix. const selectedIndex = Math.min(currentIndex, headings.length - 1); + return ( - + + ); }