vue项目中添加一键返回顶部功能

在首页添加一键返回首页顶部

效果展示图

**我处理的方式是在首页底部添加了一个组件实现返回顶部的效果
1.首先你要找一个返回的图标或图片然后使用下面的代码就可以实现
**

<template>
  <div
    class="back_top"
    @mouseover="enterBackTop"
    @mouseout="outBackTop"
    ref="backTop"
    :style="{ opacity: opacity }"
    v-show="gotop"
    @click="handleScrollTop"
  >
    <van-icon name="back-top" size="40px" /> <!-- 返回图标 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      opacity: ".3",
      gotop: false,
      scrollHeight: 300,
      scrollTop: 0
    };
  },
  methods: {
    enterBackTop() {
      this.opacity = ".5";
    },
    outBackTop() {
      this.opacity = ".3";
    },
    handleScroll(e) {
      const that = this;
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      that.scrollTop > this.scrollHeight
        ? (this.gotop = true)
        : (this.gotop = false);
    },
    handleScrollTop() {
      // this.$nextTick(() => {
      //   this.ele.scrollIntoView({ behavior: 'smooth' });
      // });
      const that = this;
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true); // 注册滚动事件
  }
};
</script>

<style lang="less" scoped>
.van-icon{
    position: fixed;
    bottom: 80px;
    right: 30px;
}
.van-icon:hover{
    opacity: 1;
}
</style>

自己新建一个组件，把代码使用到组件里在首页注册使用一下组件就ok了

如果还有不懂的，具体可以看本人的项目源码，仅供参考

项目地址：点击链接即可跳转到本人项目仓库

如果觉得这篇文章对您有一点用处的话，请不要吝啬您的小心❤❤❤