feat(路由/滚动): 添加滚动到顶部功能

- 在路由配置中添加默认滚动到顶部的行为
- 创建新的ScrollToTop组件替换原有的back-to-top
- 组件实现平滑滚动效果并优化移动端显示

Author: bestzyq

src/App.vue

@@ -190,11 +190,7 @@
         </div>
       </div>
     </footer>
-    <back-to-top bottom="100px" right="50px">
-      <button type="button" class="btn btn-light">
-        <i class="fa fa-chevron-up"></i>
-      </button>
-    </back-to-top>
+    <ScrollToTop />
   </div>
 </template>
 
@@ -538,6 +534,7 @@ body,
 import $ from "jquery";
 import Identicon from "identicon.js";
 import { Hash } from "crypto";
+import ScrollToTop from './components/ScrollToTop.vue';
 export default {
   data() {
     return {
@@ -559,6 +556,9 @@ export default {
       this.$router.go(0);
     }
   },
+  components: {
+    ScrollToTop
+  },
   computed: {
     name: function() {
       return this.$store.state.name;

src/components/ScrollToTop.vue

@@ -0,0 +1,95 @@
+<template>
+  <div 
+    class="scroll-to-top"
+    :class="{ 'show': isVisible }"
+    @click="scrollToTop"
+  >
+    <i class="fa fa-arrow-up"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollToTop',
+  data() {
+    return {
+      isVisible: false,
+      scrollPosition: 0
+    }
+  },
+  mounted() {
+    // 监听滚动事件
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    // 移除滚动事件监听
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    handleScroll() {
+      // 当页面滚动超过300px时显示按钮
+      this.isVisible = window.pageYOffset > 300
+      this.scrollPosition = window.pageYOffset
+    },
+    scrollToTop() {
+      // 使用jQuery实现平滑滚动效果
+      if (window.$) {
+        $('html, body').animate({ scrollTop: 0 }, 500)
+      } else {
+        // 降级方案：不使用动画
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.scroll-to-top {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: white;
+  color: black;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 999;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.scroll-to-top.show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.scroll-to-top:hover {
+  background-color: #f8f8f8;
+  transform: translateY(-3px);
+}
+
+.scroll-to-top i {
+  font-size: 18px;
+}
+
+@media (max-width: 768px) {
+  .scroll-to-top {
+    bottom: 20px;
+    right: 20px;
+    width: 35px;
+    height: 35px;
+  }
+  
+  .scroll-to-top i {
+    font-size: 16px;
+  }
+}
+</style>

src/router.js

@@ -58,6 +58,10 @@ const router = new Router({
   base: "/",
   linkActiveClass: "active",
   linkExactActiveClass: "exact-active",
+  scrollBehavior() {
+    // 始终滚动到顶部
+    return { x: 0, y: 0 }
+  },
   routes: [
     // 主页
     {

src/views/Tech.vue

@@ -188,6 +188,9 @@ export default {
         this.content = response.data
         this.currentPath = path
         
+        // 每次加载新文档时滚动到页面顶部
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+        
         // 获取文档标题（可能包含父菜单/子菜单格式）
         const docTitle = this.getDocTitle(path)