removed backToTop.js

src/assets/global.css

@@ -134,22 +134,59 @@
   height: 50px;
   border-radius: 50%;
   border: none;
-  cursor: pointer;
-  display: none; /* 初始状态隐藏 */
+  display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+  opacity: 0;
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
+  cursor: pointer;
   z-index: 1000;
-  transition: all 0.3s ease; /* 添加过渡效果 */
+}
+
+/* 使用 @scroll-timeline 控制按钮的显示 */
+@supports (animation-timeline: scroll()) {
+  @scroll-timeline buttonVisibility {
+    source: auto;
+    orientation: vertical;
+    scroll-offsets: 0%, 100px;
+  }
+
+  #back-to-top {
+    animation: fadeIn 0.5s linear both;
+    animation-timeline: buttonVisibility;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 }
 
 #back-to-top:hover {
-  background-color: #d0c3b4; /* 稍微深一点的颜色作为悬停效果 */
-  transform: translateY(-3px); /* 悬停时稍微上移 */
+  background-color: #b0a295;
+  transform: translateY(-3px);
 }
 
 #back-to-top:active {
-  transform: translateY(1px); /* 点击时下移，创造按压效果 */
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); /* 减小阴影 */
+  transform: translateY(1px);
+}
+
+/* 为不支持 @scroll-timeline 的浏览器提供的回退样式 */
+@supports not (animation-timeline: scroll()) {
+  #back-to-top {
+    display: none;
+  }
+}
+
+/* CSS Scroll Behavior 实现返回顶部的平滑滚动 */
+html {
+  scroll-behavior: smooth;
 }