返回顶部小猫挂件

  1<template>
  2    <div
  3      class="back_to_top"
  4      ref="toTop"
  5      :style="{
  6        top: top + 'px',
  7      }"
  8      @click="topTop"
  9    ></div>
 10  </template>
 11  <script setup lang="ts" name="BackToTop">
 12  import { useRoute } from "vitepress";
 13  import { nextTick, onUnmounted, ref, watch } from "vue";
 14  import { TkMessage } from "vitepress-theme-teek";
 15  
 16  const route = useRoute();
 17  const toTop = ref();
 18  const top = ref<number>(-900);
 19  const offsetHeight = ref<number>(0);
 20  
 21  const topTop = () => {
 22    top.value = -900;
 23    window.scrollTo({
 24      top: 0,
 25      behavior: "smooth",
 26      // @ts-ignore Safari兼容
 27      ...(typeof CSS !== "undefined" && CSS.supports("scroll-behavior", "smooth")
 28        ? {}
 29        : { left: 0 }),
 30    });
 31    TkMessage.success({
 32      message: "已达到顶部🎉",
 33      duration: 3000,
 34    });
 35  };
 36  
 37  let animationFrame: number | null = null;
 38  
 39  const backToTop = () => {
 40    if (!animationFrame) {
 41      animationFrame = requestAnimationFrame(() => {
 42        offsetHeight.value = document.documentElement.offsetHeight;
 43        const scrollTop = document.documentElement.scrollTop;
 44        if (scrollTop < 100) {
 45          top.value = -900;
 46        } else {
 47          top.value = (900 - (scrollTop / offsetHeight.value) * 900) * -1;
 48        }
 49        animationFrame = null;
 50      });
 51    }
 52  };
 53  
 54  window.addEventListener("scroll", backToTop);
 55  
 56  onUnmounted(() => {
 57    window.removeEventListener("scroll", backToTop);
 58  });
 59  
 60  watch(
 61    () => route.path,
 62    () => {
 63      nextTick(() => {
 64        offsetHeight.value = document.querySelector("html")!.offsetHeight;
 65      });
 66    }
 67  );
 68  </script>
 69  <style lang="scss" scoped>
 70  @keyframes float {
 71    0% {
 72      -webkit-transform: translateY(0);
 73      -ms-transform: translateY(0);
 74      transform: translateY(0);
 75    }
 76  
 77    50% {
 78      -webkit-transform: translateY(-10px);
 79      -ms-transform: translateY(-10px);
 80      transform: translateY(-10px);
 81    }
 82  
 83    100% {
 84      -webkit-transform: translateY(0);
 85      -ms-transform: translateY(0);
 86      transform: translateY(0);
 87    }
 88  }
 89  
 90  .back_to_top {
 91    cursor: pointer;
 92    position: fixed;
 93    right: 80px;
 94    top: -900px;
 95    z-index: 1000;
 96    width: 70px;
 97    height: 900px;
 98    background: url("/backToTop/scroll.gif");
 99    transition: all 0.5s ease-in-out;
100    opacity: 1;
101  
102    // 新增移动端隐藏
103    @media (max-width: 768px) {
104      background: none;
105    }
106  
107    &:hover {
108      animation: float 2s linear infinite;
109    }
110  }
111  </style>

1import BackToTop from "./BackToTop.vue"; //导入 返回顶部小猫挂件
2
3
4  <!-- 返回顶部小猫挂件 -->
5  <BackToTop />