Vue回到顶部

本人不善言辞直接上代码

首先页面布局

 

使用element-ui的布局组件 这里我用了顶部导航栏和底部导航栏，大家伙没写的可以不加上，主要是el-main中的内容，里面用的el-tooltip组件，大家也可以不用，这个主要是悬浮展示文字内容用的。我说的不用不是说把这个整个全删掉，el-tooltip里面的以下内容必须保留

 <div class="return-top" @click="scrollTop">
     <img src="../assets/image/dietary/huluobo.jpg" alt="" />
  </div>

<template>
  <el-container>
    <el-header><top-com /></el-header>
    <el-main>
      <el-tooltip placement="top">
        <div slot="content">回到顶部</div>
        <div class="return-top" @click="scrollTop">
          <img src="../assets/image/dietary/huluobo.jpg" alt="" />
        </div>
      </el-tooltip>

      <router-view></router-view
    ></el-main>
    <el-footer>
      <footer-com />
    </el-footer>
  </el-container>
</template>

script部分 这里也是

<script>
import FooterCom from "@/components/FooterCom.vue";
import TopCom from "@/components/TopCom.vue";
export default {
  components: { FooterCom, TopCom },
  data() {
    return {};
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    scrollTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth", // 使用平滑滚动
      });
    },
    handleScroll() {
      if (localStorage.getItem("token")) {
        const returnTop = document.querySelector(".return-top");
        if (window.scrollY > 200) {
          returnTop.style.display = "block";
        } else {
          returnTop.style.display = "none";
        }
      }
    },
  },
};

样式也给你们吧 注意了我这里使用的是less语法

<style lang="less" scoped>

.return-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  font-family: 楷体;
  border: 1px solid #e7e7e7;
  border-radius: 50%;

  img {
    width: 50px;
    height: 50px;
    transform-origin: center center;
    border-radius: 50%;
    transition: all 0.5s;
  }
  img:hover {
    transform: scale(1.1);
    transform: rotate(180deg);
  }
}
</style>

图片也给你们吧 怎么图片给我加上水印了，大家可以去百度搜索不带水印的，关键词胡萝卜卡通图片。

效果如下：

视频半天审核不过，就不展示了

展示个图片效果吧