'修改返回顶部功能'

Author: dongsuo

src/components/BackToTop/index.vue

@@ -1,9 +1,12 @@
 <template>
-  <transition name="fade">
-    <div class="back-to-top" @click="backToTop" v-show="visible">
-      <el-tooltip class="item" effect="dark" content="返回顶部" placement="top">
-        <i class="el-icon-arrow-up"></i>
-      </el-tooltip>
+  <transition :name="transitionName">
+    <div class="back-to-top" @click="backToTop" v-show="visible" :style="customStyle">
+      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
+        <title>回到顶部</title>
+        <g>
+          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path>
+        </g>
+      </svg>
     </div>
   </transition>
 </template>
@@ -18,18 +21,39 @@ export default {
     backPosition: {
       type: Number,
       default: 0
+    },
+    customStyle: {
+      type: Object,
+      default: {
+        right: '50px',
+        bottom: '50px',
+        width: '40px',
+        height: '40px',
+        'border-radius': '4px',
+        'line-height': '40px',
+        background: '#e7eaf1'
+      }
+    },
+    transitionName: {
+      type: String,
+      default: 'fade'
     }
+
   },
   data() {
     return {
-      visible: false
+      visible: false,
+      interval: null
     }
   },
   mounted() {
-    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('scroll', this.handleScroll);
   },
   beforeDestroy() {
-    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('scroll', this.handleScroll);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
   },
   methods: {
     handleScroll() {
@@ -38,11 +62,11 @@ export default {
     backToTop() {
       const start = window.pageYOffset;
       let i = 0;
-      const t = setInterval(() => {
+      this.interval = setInterval(() => {
         const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
         if (next <= this.backPosition) {
           window.scrollTo(0, this.backPosition);
-          clearInterval(t)
+          clearInterval(this.interval)
         } else {
           window.scrollTo(0, next);
         }
@@ -59,33 +83,28 @@ export default {
 <style scoped>
 .back-to-top {
   position: fixed;
-  right: 50px;
-  bottom: 50px;
   display: inline-block;
-  height: 40px;
-  width: 40px;
-  box-shadow: 1px 1px 1px #58B7FF;
   text-align: center;
   cursor: pointer;
-  background: #58B7FF;
-  color: #fff;
+}
+
+.back-to-top:hover {
+  background: #d5dbe7;
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 1s
+  transition: opacity .5s;
 }
 
 .fade-enter,
 .fade-leave-to {
   opacity: 0
 }
 
-.back-to-top i {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  line-height: 40px;
+.back-to-top .Icon {
+  fill: #9aaabf;
+  background: none;
 }
 </style>
 

src/views/components/backToTop.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="components-container">
     <code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
+    <code>可自定义按钮的样式、show/hide临界点、返回的位置
+    如需文字提示，可在外部使用Element的el-tooltip元素   </code>
     <div>我是占位</div>
     <div>我是占位</div>
     <div>我是占位</div>
@@ -125,19 +127,32 @@
     <div>我是占位</div>
     <div>我是占位</div>
     <div>我是占位</div>
-    <back-to-top id="back-to-top-t" :visibilityHeight="300" :backPosition="50"></back-to-top>
+    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
+    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
+    <el-tooltip placement="top" content="文字提示">
+    <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
+    </el-tooltip>
   </div>
 </template>
 <script>
 import BackToTop from 'components/BackToTop';
 export default {
-  components: { BackToTop }
-
+  components: { BackToTop },
+  data() {
+    return {
+      myBackToTopStyle: {
+        right: '50px',
+        bottom: '50px',
+        width: '40px',
+        height: '40px',
+        'border-radius': '4px',
+        'line-height': '40px', // 请保持与高度一致以垂直居中
+        background: '#e7eaf1'// 按钮的背景颜色
+      }
+    }
+  }
 }
 </script>
 <style scoped>
-  #back-to-top-t{
-    right: 100px;
-    bottom: 100px;
-  }
+
 </style>