制作回到顶部按钮

互联网 17-3-25

我们先看一下效果吧，直接上图。

第一种情况,当页面在顶部的时候，回到顶部按钮是不会出现的。

第二种情况,当页面在离开顶部一定距离的时候，回到顶部按钮出现

WXML代码：

<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>

JS代码：

//回到顶部按钮  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       });      }      })

WXSS代码：

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

以上就是制作回到顶部按钮的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：小程序开发，微信开发