From 4ede8ec0f052566eb7cc5304c2a0d18f93e0890d Mon Sep 17 00:00:00 2001
From: Frost-ZX <30585462+Frost-ZX@users.noreply.github.com>
Date: Sat, 5 Mar 2022 23:13:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E2=80=9C=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E2=80=9D=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/main.less  |  2 +
 src/components/ToTop.vue  | 77 +++++++++++++++++++++++++++++++++++++++
 src/views/ContentView.vue |  7 +++-
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ToTop.vue

diff --git a/src/assets/css/main.less b/src/assets/css/main.less
index 957ead2..0262b11 100644
--- a/src/assets/css/main.less
+++ b/src/assets/css/main.less
@@ -1,6 +1,7 @@
 :root {
     font-size: 16px;
     --color-primary: #1E88E5;
+    --color-green: #4CAF50;
 }
 
 // 滚动条
@@ -26,6 +27,7 @@ html, body, #app {
     background-color: #FFF;
     overflow: hidden;
     user-select: none;
+    -webkit-tap-highlight-color: transparent;
 }
 
 /* Buefy */
diff --git a/src/components/ToTop.vue b/src/components/ToTop.vue
new file mode 100644
index 0000000..5c5cd8d
--- /dev/null
+++ b/src/components/ToTop.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="to-top" @click="scrollToTop()">
+    <b-icon icon="arrow-up"></b-icon>
+    <div class="cover"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToTop',
+  props: {
+
+    /** 滚动的元素 */
+    scrollElement: {
+      type: HTMLElement,
+      default: null
+    },
+
+  },
+  methods: {
+
+    /** 滚动到顶部 */
+    scrollToTop() {
+
+      const el = (this.scrollElement || this.$el.parentElement);
+
+      if (!el) {
+        console.error('操作失败，找不到滚动元素。');
+        return;
+      }
+
+      el.scrollTo({
+        behavior: 'smooth',
+        top: 0,
+      });
+
+    },
+
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.to-top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  box-shadow:
+    0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.14),
+    0 0.2rem 0.1rem -0.15rem rgba(0, 0, 0, 0.12),
+    0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2);
+  border-radius: 0.25rem;
+  background-color: var(--color-green);
+  color: #FFF;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover .cover {
+    opacity: 0.2;
+  }
+}
+
+.cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #FFF;
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+</style>
diff --git a/src/views/ContentView.vue b/src/views/ContentView.vue
index 0da76ce..15259fd 100644
--- a/src/views/ContentView.vue
+++ b/src/views/ContentView.vue
@@ -61,7 +61,7 @@
     </div>
 
     <!-- 内容区域 -->
-    <div class="content-wrapper">
+    <div ref="contentWrapper" class="content-wrapper">
 
       <!-- 文章主页 -->
       <template v-if="isIndex">
@@ -82,6 +82,9 @@
         />
       </template>
 
+      <!-- 返回顶部 -->
+      <to-top />
+
     </div>
 
   </div>
@@ -93,12 +96,14 @@ import { getContentFile } from '@/request/index';
 
 import ContentIndex from '@/components/ContentIndex';
 import MarkdownParser from '@/components/MarkdownParser';
+import ToTop from '@/components/ToTop';
 
 export default {
   name: 'ContentView',
   components: {
     ContentIndex,
     MarkdownParser,
+    ToTop,
   },
   data() {
     return {