van-button回到顶部按钮

最新推荐文章于 2024-07-09 17:25:08 发布

进击的小白兔vl

最新推荐文章于 2024-07-09 17:25:08 发布

阅读量819

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_46404694/article/details/114015433

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

template中
  <!-- 回到顶部按钮 -->
    <van-button
      type="info"
      class="backTop"
      color="#5cccfb"
      plain
      hairline
      round
      @click="backTop"
      icon="arrow-up"
      v-if="showgo"
    >
    //检测滚动条高度，大于300时出现按钮
    mounted() {
    var vm = this;
    window.onscroll = function () {
      if (document.documentElement.scrollTop > 300) {
        vm.showgo = true;
      } else {
        vm.showgo = false;
      }
    };
  },
  回到顶部方法
 backTop() {
      scrollTo(0, 0);
    },
样式参考
.backTop {
  width: 42px;
  height: 42px;
  /* background: #eee; */
  box-shadow: 3px 3px 2px #d2effc;
  /* background: rgba(115, 170, 247, 0.2); */
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1000;
  text-align: center;
  line-height: 100px;
}