webiste: add scroll top btn (#535)

Signed-off-by: yuluo-yx <[email protected]>

Author: yuluo-yx

website/src/components/ScrollToTop/index.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react'
+import styles from './styles.module.css'
+
+export default function ScrollToTop(): React.ReactElement {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 300) {
+        setIsVisible(true)
+      }
+      else {
+        setIsVisible(false)
+      }
+    }
+
+    window.addEventListener('scroll', toggleVisibility)
+
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility)
+    }
+  }, [])
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    })
+  }
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className={styles.scrollToTop}
+          aria-label="Scroll to top"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 19V5M12 5L5 12M12 5L19 12"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      )}
+    </>
+  )
+}

website/src/components/ScrollToTop/styles.module.css

@@ -0,0 +1,93 @@
+.scrollToTop {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-purple));
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(9, 105, 218, 0.3);
+  transition: all 0.3s ease;
+  z-index: 999;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: fadeInUp 0.3s ease forwards;
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.scrollToTop:hover {
+  transform: translateY(-4px) scale(1.1);
+  box-shadow: 0 8px 20px rgba(9, 105, 218, 0.4);
+}
+
+.scrollToTop:active {
+  transform: translateY(-2px) scale(1.05);
+}
+
+[data-theme='dark'] .scrollToTop {
+  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-orange));
+  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.4);
+}
+
+[data-theme='dark'] .scrollToTop:hover {
+  box-shadow: 0 8px 20px rgba(88, 166, 255, 0.5);
+}
+
+@media (max-width: 768px) {
+  .scrollToTop {
+    bottom: 1.5rem;
+    right: 1.5rem;
+    width: 45px;
+    height: 45px;
+  }
+}
+
+.scrollToTop::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0;
+  animation: pulse 2s ease-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+}
+
+.scrollToTop svg {
+  position: relative;
+  z-index: 1;
+  transition: transform 0.3s ease;
+}
+
+.scrollToTop:hover svg {
+  transform: translateY(-2px);
+}

website/src/theme/Root.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Root from '@theme-original/Root'
+import ScrollToTop from '../components/ScrollToTop'
+
+export default function RootWrapper(props: any): React.ReactElement {
+  return (
+    <>
+      <Root {...props} />
+      <ScrollToTop />
+    </>
+  )
+}