【微信小程序】实现类似WEB端【返回顶部】功能

1、原理：利用小程序自带的<scroll-view>组件，该组件的bindScroll和scroll-top方法、属性进行联合操作

2、效果图：

3、wxml：

<scroll-view  scroll-y="true" style="height:{{scrollHeight}}px;" bindscroll="scroll" scroll-top="{{scrollTop}}" >
<text class="title">{{list.art_title}}</text>
<p class="oneline">{{list.seo_desc}}</p>

      <!--回到顶部  -->
      <view class="com-widget-goTop" bindtap="goTop" wx:if="{{floorstatus}}">
            <view class="icon-gotop">
                顶部
            </view>
      </view>

</scroll-view>

4、js：

  scroll: function (e, res) {
    // 容器滚动时实时获取滚动高度：e.detail.scrollTop
    //当超过限定值如500时，展示【返回顶部图片】,通过标识"floorstatus"的真假判断展示、隐藏
    if (e.detail.scrollTop > 500) {
      this.setData({
        floorstatus: true
      });
    }
    else {
      this.setData({
        floorstatus: false
      });
    }
  },
  // 点击图片，使scrollTop属性==0，回到顶部
  goTop: function (e) {
    this.setData({
      scrollTop: 0
    })
  },

5、wxss：

/*回到顶部  */
.com-widget-goTop {
  position: fixed;
  bottom: 125px;
  right: 5px;
  background: rgba(0,0,0,0.48);
  border-radius: 50%;
  overflow: hidden;
  z-index:;
}
.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;
  background-size:50px auto;
}
/*end*/