微信小程序——返回顶部

 如图。在列表页面，当滚动条距顶部距离超过500的时候，将返回顶部的箭头显示出来，点击按钮之后返回到列表顶部，随即箭头按钮消失。

1、wxml文件中的代码为：

<!-- 置顶按钮 -->
<view class="to_top_box {{isTop==0?'hide':'show'}}" bindtap='returnTop'>
  <view class="to_top_circular">
    <view class="iconfont icon-jiantou1"></view>
  </view>
</view>

 2、css布局文件代码：

/* 返回顶部 */



.to_top_box {

position: fixed;

bottom: 40rpx;

right: 60rpx;

}



.to_top_circular {

background: #2ecc71;

width: 84rpx;

height: 84rpx;

position: relative;

border-radius: 50%;

box-shadow: 0rpx 0rpx 20rpx 2rpx #555;

}



.icon-jiantou1 {

color: #fff;

position: absolute;

font-size: 41rpx;

left: 20rpx;

top: 22rpx;

}

 3、js代码：

 这样就完成了返回顶部这项小功能了。