GoToTop

src/components/GoToTop.css

+/* GoToTop.css */
+.go-to-top-button {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #ff69b4; /* 可爱的粉红色 */
+    color: white;
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+  }
+  
+  .go-to-top-button:hover {
+    opacity: 1; /* 鼠标悬停时变得更清晰 */
+  }
+  
+  .go-to-top-button:active {
+    background-color: #ff1493; /* 点击时颜色变深 */
+  }
\ No newline at end of file

src/components/GoToTop.tsx

+import  { useState, useEffect } from 'react';
+import './GoToTop.css';  
+
+export function GoToTop(){
+  const [showButton, setShowButton] = useState(false);
+
+  // 检测页面滚动
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 300) {
+        setShowButton(true); // 当滚动超过300px时，显示按钮
+      } else {
+        setShowButton(false); // 滚动回顶部时隐藏按钮
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  // 点击按钮滚动到顶部
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth' // 平滑滚动
+    });
+  };
+
+  return (
+    <>
+      {showButton && (
+        <button className="go-to-top-button" onClick={scrollToTop}>
+          ↑ Go to Top
+        </button>
+      )}
+    </>
+  );
+};
+
+

src/containers/App/App.tsx

@@ -2,7 +2,7 @@ import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';  // 引入 Bootstrap JavaScript
 import { Route, Routes, useLocation } from "react-router-dom";
-import { Footer, Header, Navbar, NotFound, Loading } from "../../components";
+import { Footer, Header, Navbar, NotFound, Loading,} from "../../components";
 import { getPathMapping, stringToSlug } from "../../utils";
 import { useEffect, useState } from "react";
 import axios from "axios";