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>