Two small micro-channel program back to the top of the button results achieved

First, the use of the form back to the top view
HTML:

<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

CSS：

/* 返回顶部 */
.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  background: rgba(0,0,0,.3);
  right: 30rpx;
  border-radius: 50%;
}

JS：

 // Get the current position of the scroll bar 
  onPageScroll: function (E) { 
    the console.log (E) 
    IF (e.scrollTop> 100 ) {
       the this .setData ({ 
        floorstatus: to true 
      }); 
    } the else {
       the this .setData ({ 
        floorstatus: to false 
      }); 
    } 
  }, 

  // top 
  gotop: function (E) {   // a button to return to the top of the 
    IF (wx.pageScrollTo) { 
      wx.pageScrollTo ({ 
        scrollTop: 0 
      }) 
    } the else{ 
      Wx.showModal ({ 
        title: 'prompt' , 
        Content: 'after the current version of the micro-channels is too low to use this feature, upgrade to the latest version of the micro channel to retry.' 
      }) 
    } 
  },

II. Use scroll-view form back to the top

HTML：

<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

CSS：

/* 返回顶部 */
.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  background: rgba(0,0,0,.3);
  right: 30rpx;
  border-radius: 50%;
}

JS：

 // Get the current position of the scroll bar 
  scrolltoupper: function (E) { 
    the console.log (E) 
    IF (e.detail.scrollTop> 100 ) {
       the this .setData ({ 
        floorstatus: to true 
      }); 
    } the else {
       the this .setData ({ 
        floorstatus: to false 
      }); 
    } 
  }, 

  // top 
  gotop: function (E) {   // a key to return to the top of 
    the this .setData ({ 
      topNum: the this .data.topNum = 0 
    }); 
  },