One

主题

One2025-05-10
998
4.7m
Get...

返回顶部小猫挂件 ​

返回顶部小猫挂件 ​

image-20250509195046866

目录 ​

[toc]

简介 ​

来给自己的Teek博客增加一个返回顶部小猫挂件功能。😊

版权 ​

警告

本着开源共享、共同学习的精神：

本文是在 《Hyde Blog》博主的《返回顶部挂件》文章 基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有（感谢原作者分享的手把手文档💖💖💖）。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

环境 ​

2025.5.9(已解决)

警告

次配置适用于Teek@1.1.4-2025.5.8版本（其它版本可自行测试）。

提示

自己开源的 《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

安装 ​

（1）新建组件

创建docs\.vitepress\theme\components\BackToTop.vue文件，添加如下代码：

vue
<template>
    <div
      class="back_to_top"
      ref="toTop"
      :style="{
        top: top + 'px',
      }"
      @click="topTop"
    ></div>
  </template>
  <script setup lang="ts" name="BackToTop">
  import { useRoute } from "vitepress";
  import { nextTick, onUnmounted, ref, watch } from "vue";
  import { TkMessage } from "vitepress-theme-teek";
  
  const route = useRoute();
  const toTop = ref();
  const top = ref<number>(-900);
  const offsetHeight = ref<number>(0);
  
  const topTop = () => {
    top.value = -900;
    window.scrollTo({
      top: 0,
      behavior: "smooth",
      // @ts-ignore Safari兼容
      ...(typeof CSS !== "undefined" && CSS.supports("scroll-behavior", "smooth")
        ? {}
        : { left: 0 }),
    });
    TkMessage.success({
      message: "已达到顶部🎉",
      duration: 3000,
    });
  };
  
  let animationFrame: number | null = null;
  
  const backToTop = () => {
    if (!animationFrame) {
      animationFrame = requestAnimationFrame(() => {
        offsetHeight.value = document.documentElement.offsetHeight;
        const scrollTop = document.documentElement.scrollTop;
        if (scrollTop < 100) {
          top.value = -900;
        } else {
          top.value = (900 - (scrollTop / offsetHeight.value) * 900) * -1;
        }
        animationFrame = null;
      });
    }
  };
  
  window.addEventListener("scroll", backToTop);
  
  onUnmounted(() => {
    window.removeEventListener("scroll", backToTop);
  });
  
  watch(
    () => route.path,
    () => {
      nextTick(() => {
        offsetHeight.value = document.querySelector("html")!.offsetHeight;
      });
    }
  );
  </script>
  <style lang="scss" scoped>
  @keyframes float {
    0% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  
    50% {
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
    }
  
    100% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .back_to_top {
    cursor: pointer;
    position: fixed;
    right: 80px;
    top: -900px;
    z-index: 1000;
    width: 70px;
    height: 900px;
    background: url("/backToTop/scroll.gif");
    transition: all 0.5s ease-in-out;
    opacity: 1;
  
    // 新增移动端隐藏
    @media (max-width: 768px) {
      background: none;
    }
  
    &:hover {
      animation: float 2s linear infinite;
    }
  }
  </style>

（2）注册组件

编辑docs\.vitepress\theme\components\TeekLayoutProvider.vue文件，添加如下代码：（具体代码可从我开源库Teek-one里获取）

ts
import BackToTop from "./BackToTop.vue"; //导入 返回顶部小猫挂件


  <!-- 返回顶部小猫挂件 -->
  <BackToTop />

image-20250509195255524

image-20250509195318082

（3）运行测试

效果 ​

每切换到一个网页时，会弹出如下弹框哦，有趣的特性。

image-20250509195337835

关于我 ​

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 个人网站

image-20250109220325748

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后 ​

如果你还有疑惑，可以去我的网站查看更多内容或者联系我帮忙查看。

如果你有更好的方式，评论区留言告诉我。谢谢！

好了，本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

最近更新