实现效果：
相关代码：
<template><div class="cats" :style="{ top: catsTop }" ref="cats" @click="catTop"></div>
</template>样式：
/* 回到顶部 - 小猫咪 */
.cats {position: fixed;right: 56px;top: -80px;z-index: 9999;width: 64px;height: 64px;transform: translateX(50%);background: url('@/assets/images/cat.png') no-repeat center center / contain;cursor: pointer;
}.cats::after {position: absolute;content: '别滚动了～';right: 55%;top: -110%;width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;background: url('@/assets/images/cat-word.png') no-repeat center center / contain;font-size: 14px;color: rgb(57, 197, 187);padding-top: 6px;box-sizing: border-box;opacity: 0;transition: all .2s ease-in-out;pointer-events: none;
}.cats.bottom::after {opacity: 1;
}功能：
import { ref,onMounted,onUnmounted,nextTick } from 'vue';const cats = ref<HTMLElement | null>(null); const catsTop = ref('-80px')let doctH = 0 // 文档高度let viewH = 0 // 可视区域高度//点击后跳转至顶部const catTop = () => {document.documentElement.scrollTop = document.body.scrollTop = 0}//滚动时运行代码，用于计算滚动位置const calcScroll = () => {const scroll = document.documentElement.scrollTop || document.body.scrollTopconst hideH = doctH - viewHlet rate = scroll / hideHif(rate>=1){rate=1}const result = Math.floor(viewH * rate)catsTop.value = `${result - 128}px`doctH === scroll + viewH ? cats.value?.classList.add('bottom') : cats.value?.classList.remove('bottom')}onMounted(async () => {await nextTick(() => {//将浏览器视口中可视区域的高度（不包括滚动条、工具栏等）赋值给变量 doctHdoctH = document.documentElement.scrollHeight//获取浏览器视口高度的标准属性viewH = window.innerHeight || document.documentElement.clientHeightwindow.addEventListener('scroll', calcScroll)})})onUnmounted(() => {window.removeEventListener('scroll', calcScroll)})
