From bf08756644b8f8f0861448903cd6b65e3fd8fc9d Mon Sep 17 00:00:00 2001
From: dongsuo <xuxiaofei1.0@outlook.com>
Date: Mon, 17 Jul 2017 15:33:21 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=EF=BC=9A?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9E=E9=A1=B6=E9=83=A8'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BackToTop/index.vue |  92 +++++++++++++++++++
 src/router/index.js                |   4 +-
 src/views/components/backToTop.vue | 143 +++++++++++++++++++++++++++++
 3 files changed, 238 insertions(+), 1 deletion(-)
 create mode 100644 src/components/BackToTop/index.vue
 create mode 100644 src/views/components/backToTop.vue

diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
new file mode 100644
index 00000000..10aaef1b
--- /dev/null
+++ b/src/components/BackToTop/index.vue
@@ -0,0 +1,92 @@
+<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>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  name: 'BackToTop',
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 400
+    },
+    backPosition: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    handleScroll() {
+      this.visible = window.pageYOffset > this.visibilityHeight;
+    },
+    backToTop() {
+      const start = window.pageYOffset;
+      let i = 0;
+      const t = setInterval(() => {
+        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
+        if (next <= this.backPosition) {
+          window.scrollTo(0, this.backPosition);
+          clearInterval(t)
+        } else {
+          window.scrollTo(0, next);
+        }
+        i++;
+      }, 16.7)
+    },
+    easeInOutQuad(t, b, c, d) {
+      if ((t /= d / 2) < 1) return c / 2 * t * t + b;
+      return -c / 2 * (--t * (t - 2) - 1) + b;
+    }
+  }
+}
+</script>
+<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;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0
+}
+
+.back-to-top i {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  line-height: 40px;
+}
+</style>
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 7f20b766..0d476f2f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,6 +28,7 @@ const Sticky = _import('components/sticky');
 const SplitPane = _import('components/splitpane');
 const CountTo = _import('components/countTo');
 const Mixin = _import('components/mixin');
+const BackToTop = _import('components/backToTop')
 
 /* charts */
 const chartIndex = _import('charts/index');
@@ -129,7 +130,8 @@ export const asyncRouterMap = [
       { path: 'dropzone', component: Dropzone, name: 'Dropzone' },
       { path: 'sticky', component: Sticky, name: 'Sticky' },
       { path: 'countto', component: CountTo, name: 'CountTo' },
-      { path: 'mixin', component: Mixin, name: '小组件' }
+      { path: 'mixin', component: Mixin, name: '小组件' },
+      { path: 'backtotop', component: BackToTop, name: '返回顶部' }
     ]
   },
   {
diff --git a/src/views/components/backToTop.vue b/src/views/components/backToTop.vue
new file mode 100644
index 00000000..b20bbcfe
--- /dev/null
+++ b/src/views/components/backToTop.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="components-container">
+    <code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <div>我是占位</div>
+    <back-to-top id="back-to-top-t" :visibilityHeight="300" :backPosition="50"></back-to-top>
+  </div>
+</template>
+<script>
+import BackToTop from 'components/BackToTop';
+export default {
+  components: { BackToTop }
+
+}
+</script>
+<style scoped>
+  #back-to-top-t{
+    right: 100px;
+    bottom: 100px;
+  }
+</style>