diff --git a/docs/.vitepress/devui-theme/components/BackToTop.vue b/docs/.vitepress/devui-theme/components/BackToTop.vue
new file mode 100644
index 0000000000000000000000000000000000000000..77ad149f2adc20316f84c9ea9237fe04a1e44373
--- /dev/null
+++ b/docs/.vitepress/devui-theme/components/BackToTop.vue
@@ -0,0 +1,102 @@
+<template>
+  <transition name="fade">
+    <svg
+      v-if="show"
+      class="go-to-top"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 49.484 28.284"
+      @click="scrollToTop"
+    >
+      <g transform="translate(-229 -126.358)">
+        <rect
+          fill="currentColor"
+          width="35"
+          height="5"
+          rx="2"
+          transform="translate(229 151.107) rotate(-45)"
+        />
+        <rect
+          fill="currentColor"
+          width="35"
+          height="5"
+          rx="2"
+          transform="translate(274.949 154.642) rotate(-135)"
+        />
+      </g>
+    </svg>
+  </transition>
+</template>
+
+<script lang="ts">
+import { debounce } from 'lodash-es'
+import { defineComponent, onMounted, computed, ref } from 'vue'
+export default defineComponent({
+  name: 'BackToTop',
+  props: {
+    threshold: {
+      type: Number,
+      default: 300,
+    },
+  },
+  setup(props) {
+    const scrollTop = ref<number | null>(null)
+    const show = computed(() => {
+      return scrollTop.value! > props.threshold
+    })
+    const scrollToTop = () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+      scrollTop.value = 0
+    }
+    const getScrollTop = () => {
+      return (
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop ||
+        0
+      )
+    }
+    onMounted(() => {
+      scrollTop.value = getScrollTop()
+      window.addEventListener(
+        'scroll',
+        debounce(() => {
+          scrollTop.value = getScrollTop()
+        }, 100)
+      )
+    })
+
+    return {
+      show,
+      scrollToTop,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.go-to-top {
+  cursor: pointer;
+  position: fixed;
+  bottom: 2rem;
+  right: 2.5rem;
+  width: 2rem;
+  color: var(--devui-brand);
+  z-index: 1;
+}
+.go-to-top:hover {
+  color: var(--devui-brand-hover);
+}
+@media (max-width: 959px) {
+  .go-to-top {
+    display: none;
+  }
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/docs/.vitepress/devui-theme/components/Page.vue b/docs/.vitepress/devui-theme/components/Page.vue
index 90d7be345412467602354a2bcf228d931e88155e..3051cb1784189c621c3bc95cf87898e3140b0a3e 100644
--- a/docs/.vitepress/devui-theme/components/Page.vue
+++ b/docs/.vitepress/devui-theme/components/Page.vue
@@ -4,7 +4,7 @@ import { useRoute } from 'vitepress'
 import PageFooter from "./PageFooter.vue"
 import NextAndPrevLinks from "./NextAndPrevLinks.vue"
 import PageToc from "./PageToc.vue"
-
+import BackToTop from './BackToTop.vue'
 const isComponents = computed(() => useRoute().path.indexOf('components') > -1)
 
 </script>
@@ -19,6 +19,7 @@ const isComponents = computed(() => useRoute().path.indexOf('components') > -1)
       <NextAndPrevLinks />
 
       <slot name="bottom" />
+      <BackToTop />
       <PageToc v-if="isComponents" class="toc-warpper" />
     </div>
   </main>