vue 向下滑动显示返回按钮，点击按钮返回顶部

最新推荐文章于 2024-07-08 13:45:00 发布

yydszxd

最新推荐文章于 2024-07-08 13:45:00 发布

阅读量556

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yydszxd/article/details/123293416

版权

<template>
  <div>
    <div class="fixed" :class="{ active: juli < 100 }" @click="dianji"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      e: "",
      juli: "",
    };
  },
  mounted() {
    //页面滚动出发事件
    window.addEventListener("scroll", this.chufagundong, true);
  },
  destroyed() {
    //本页面销毁时候，把滚动事件取消掉
    window.removeEventListener("scroll", this.setHeadPosition, true);
  },
  methods: {
    //滚动事件触发时候会传e 里面有滚动的数据
    chufagundong(e) {
      this.e = e.target;
      this.juli = e.target.scrollTop;
    },
  //点击回到最上方
    dianji() {
      this.e.scrollTop = 0;
    },
    setHeadPosition（）{
        console.log(1)
      }
    


  },
};
</script>

<style lang="less" scoped>
.fixed {
  width: 100px;
  height: 100px;
  background: red;
  position: fixed;
  right: 100px;
  bottom: 100px;
}
.active {
  display: none;
}
</style>