码迷,mamicode.com
首页 > 移动开发 > 详细

移动端Vue回到顶部

时间:2018-10-10 14:22:40      阅读:1908      评论:0      收藏:0      [点我收藏+]

标签:show   aci   relative   this   div   element   var   add   回到顶部   

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);
},

 

移动端Vue回到顶部

标签:show   aci   relative   this   div   element   var   add   回到顶部   

原文地址:https://www.cnblogs.com/yuanxinru321/p/9765510.html

(2)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!