vue3 返回顶部组件

最新推荐文章于 2024-06-14 15:42:03 发布

*初级小白*~

最新推荐文章于 2024-06-14 15:42:03 发布

阅读量222

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/ScumStudy/article/details/126540817

版权

本文将介绍如何在 Vue3 项目中创建一个返回顶部的组件。通过监听滚动事件，实现当页面滚动到一定距离时显示返回顶部按钮，点击按钮则平滑滚动回页面顶部。我们将使用 Vue3 的 Composition API 来编写这个组件。

摘要由CSDN通过智能技术生成

<template>
<div class="body"></div>
  <div v-if="btnShow" style="position: fixed; right: 50px;bottom: 50px; z-index: 2">
    <button class="scaleBig" @click="backTop">1213</button>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
export default {
  name: "Top",
  setup() {
    const btnShow = ref(false)
    let timer = null; onMounted(() => {
      window.addEventListener('scroll', scrollToTop)
    })
    const backTop=()=> {
      timer = setInterval(function () {
        let backTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let speedTop = backTop / 5; 
        document.documentElement.scrollTop = backTop - speedTop; if (backTop === 0) {
          clearInterval(timer)
        }
      }, 50);
    } 
    const scr