小程序如何设置回到顶部？小程序回到顶部按钮怎么开发？

　　想要让小程序回到顶部，除了在开发小程序最开始就进行相应的设置之外，只有一个办法，那就是开发一个回到顶部的小程序按钮。小程序如何设置回到顶部呢?回到顶部的按钮怎么开发?以下是教程。

　　小程序回到顶部效果图：

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

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

　　小程序设置回到顶部相关代码：

　　在这里我们如果要使用滚动事件的话，微信小程序商店介绍过相关的小程序规则，规定最外层一定要使用scroll-view标签进行包裹，然后在设置scroll-y=”true” 意思是允许页面了纵向滚动，scroll-top是滚动到顶部做处理，一般绑定一个事件，bindscrolltolower同样的原理，滚动到底部做处理，bindscroll表示在滚动的时候出发这个事件。下面WXML内部的话，就是我们回到顶部的按钮设置，我们在点击它时绑定一个事件goTop，让他的滚动高度等于0，这样它就回到顶部了。

　　WXML代码：

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

　　顶部

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

　　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/

　　-widget-goTop {

　　position: fixed;

　　bottom: 125px;

　　right: 5px;

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

　　border-radius: 50%;

　　overflow: hidden;

　　z-index: 500;

　　}

　　-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(m.dev.vd/static/xcx/v1/goo/w_2-3451cc437e.png) no-repeat center -1110px;

　　-webkit-background-size: 50px auto;

　　}

　　参照上述的教程和小程序码，对于小程序如何设置回到顶部大家都知道了吗?根据文中的步骤你就可以设置一个让小程序回到顶部的按钮，点击按钮就可以实现小程序回到顶部了，赶紧来试试吧。

　　微信小程序显示在聊天顶部时，可实时重要的展示状态信息

　　怎样实现微信小程序顶部tab切换

　　微信小程序顶部选项卡怎么开发