用vue封装一个返回顶部的按钮组件goTop.vue

这是1个封装好的返回顶部组件

<template>
  <div>
    <div v-if="activeShow" class="goTop" ref="goTop" @click="goTopClick">
      <i class="el-icon-caret-top"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        //默认关闭
      activeShow: false,
    };
  },
  methods: {
    goTopClick() {
      document.documentElement.scrollIntoView({ behavior: "smooth" });
    },
    handleScroll() {
      let heightt = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(height); //滚动高度
      if (heightt  > 1200) {
        this.activeShow = true;
      } else {
        this.activeShow = false;
      }
    },
  },
  mounted() {
      //监听滚动条
    window.addEventListener("scroll", this.handleScroll, true);
  },
};
</script>

<style lang="less" scoped>
.goTop {
  position: fixed;
  background-color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px rgb(0 0 0 / 12%);
  cursor: pointer;
  z-index: 5;
  right: 5%;
  bottom: 10%;
  &:hover {
    background-color: #f2f6fc;
  }
}
</style>

在需要使用返回顶部按钮的地方引入使用即可

如果全局都需要返回顶部按钮，直接在app.vue引入更好。

<template>
  <div id="app">
      <goTop></goTop>
    <router-view></router-view>
  </div>
</template>
<script>
import goTop from '@/components/goTop'
export default {
    components:{
        goTop
    }
}

按钮固定在视窗右下角的位置

参数调节：滚动到哪个高度时触发按钮实现返回顶部功能。

我这里设置了200的滚动视窗高度，滚动到200就触发按钮，该滚动高度可以自己设置。