一个移动端回顶小按钮

87 阅读1分钟

html 一个小图标

<img class="toTopIcon" v-if="showTopIcon" @click="on2TopIconClick"
src="../../assets/img/loan/icon_top.png"/>

css,固定定位在右下角

.toTopIcon {
  position: fixed;
  right: 0.2rem;
  top: 10rem;
  width: 0.76rem;
  height: 0.76rem;
  z-index: 999;
}

js

//初始化,监听页面滚动,Vue的created中
window.onscroll = function() {
      self.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      self.showTopIcon = self.scrollTop > 750;
    };

//点击回顶方法
    on2TopIconClick() {
      window.scroll(0, 0);
      this.showTopIcon = false;
    },