1. 效果图
    在这里插入图片描述
  2. 正常页面
  3. 在这里插入图片描述
  4. 废话不多说直接上逻辑代码
 <div class="box_rtop" v-if="top" @click="tops()">
 //if先将元素隐藏,if浪费性能重新渲染mod,可以使用show可跟你你个人方式使用
 //top默认为false不显示
 <img src="../../../static/icons/联合 15.png" /></div>
 <div class="box_ri" v-if="top">重要</div>
 //这是写好的样式元素
  mounted() {
    var THIS = this;
    window.addEventListener('scroll', function() {//监听滚动
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;为了兼容
      if (scrollTop >= 108) {
      //如果当前滚动位置大于您的所需要达到的高度则显示置顶元素,反之不显示
        THIS.top = true;
      } else {
        THIS.top = false;
      }
    });
  },

在你的置顶点击事件方法添加

// 置顶操作
tops(){
//使得返回顶部过渡置增加交互效果
 var timer = setInterval(() => document.documentElement.scrollTop <= 0 ? clearInterval(timer) : window.scrollTo(0, document.documentElement.scrollTop - 10), 17);
},
Logo

前往低代码交流专区

更多推荐