微信小程序回到顶部按钮制作方式讲解

 <scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}"   bindscroll="scroll" bindscrolltolower= "scrolltolower" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">

    //*********************

     <view class="com-widget-goTop" bindtap="goTop" wx:if="{{floorstatus}}">

           <view class="icon-gotop">

               顶部

           </view>

     </view>

     //*********************

 </view>

//回到顶部按钮

Page({

data: {

   scrollTop: 0

   },

goTop: function(e){

   this.setData({

       scrollTop:0

   })

},

scroll:function(e,res){

// 容器滚动时将此时的滚动距离赋值给 this.data.scrollTop

if(e.detail.scrollTop > 500){

    this.setData({

       floorstatus: true

    });

}else {

    this.setData({

       floorstatus: false

    });

   }

   })

bigWrap{

background:#eee;

}

/goTop回到顶部图标start/

.com-widget-goTop {

position: fixed;

bottom: 125px;

right: 5px;

background: rgba(0,0,0,0.48);

border-radius: 50%;

overflow: hidden;

z-index: 500;

}

.com-widget-goTop .icon-gotop{

background-color: rgba(0,0,0,0.8);

display: inline-block;

width: 50px;

height: 50px;

line-height: 68px;

font-size: 12px;

color: #ffffff;

text-align: center;

border-radius: 50%;

background: url(http://m.dev.vd.cn/static/xcx/v1/goo/w_2-3451cc437e.png) no-repeat center -1110px;

-webkit-background-size: 50px auto;

}