移动端Vue回到顶部

Posted 2021-01-11 yuanxinru321

html：

<div class="totop" id="totop" @click="Top" v-show="totop">
   <i class="iconfont icon-zhiding"></i>
</div>

css：

.totop{
        position: fixed;
        width: 2.5rem ;/* 40/16 */
        height: 2.5rem;
        border-radius: 1.25rem /* 20/16 */;
        opacity: 0.8;
        background: rgba(255,255,255,.9);
        box-shadow: 0 1px 5px 0 #e0e0e0;
        right: 1.125rem; /* 18/16 */
        bottom: 6rem; /* 64/16 */
        z-index: 1100;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        i{
          font-size: 1.5rem;
          color: #e2294c;
          margin: 0 0 0 0.5rem;
          position: relative;
          top: 0.5rem;
        }
}

vue.js

mounted(){
   window.addEventListener(‘scroll‘, this.scrollToTop)
},
destroyed () {
   window.removeEventListener(‘scroll‘, this.scrollToTop); 
},

Top(){
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  document.documentElement.scrollTop = document.body.scrollTop =0; 
  //  scroll(‘0px‘, 300);
},