如圖。在列表頁面，當滾動條距頂部距離超過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程式碼：

 這樣就完成了返回頂部這項小功能了。