v-backtop

返回顶部指令，当页面滚动到一定高度时显示返回顶部按钮。

基础用法

请继续向下滚动页面，当滚动超过 400px 时会在右下角显示返回顶部按钮。点击按钮可以平滑滚动回顶部。

• visibilityHeight：滚动高度达到此参数值才出现
• duration：回到顶部所需时间(ms)

点击查看代码

<template>
  <a-button
    v-backtop="{
      visibilityHeight: 400,
      duration: 500
    }"
    class="backtop-btn"
  >
    <svg viewBox="0 0 1024 1024" width="24" height="24">
      <path fill="currentColor" d="M512 366.293l-384 384v-91.627l384-384 384 384v91.627z" />
    </svg>
  </a-button>
</template>

<script setup>
import { vBacktop } from '@cp-vuedir/core'
</script>

<style scoped>
.backtop-btn {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: var(--vp-c-brand);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s;
  color: #fff;
  z-index: 9999;
}

.backtop-btn:hover {
  background-color: #66b1ff;
}
</style>

API

属性名	说明	类型	是否必选	默认值
visibilityHeight	滚动高度达到此参数值才出现，单位 px	number	○	400
duration	回到顶部所需时间，单位 ms	number	○	500

注意事项

注意

• 使用该指令的元素会自动添加点击事件，点击后页面会平滑滚动到顶部
• 当滚动高度小于 visibilityHeight 时，元素会被隐藏
• 指令会自动处理事件的绑定和解绑，无需手动管理