我們先看一下效果吧，直接上圖。

第一種情況,當(dāng)頁面在頂部的時(shí)候，回到頂部按鈕是不會(huì)出現(xiàn)的。

---

第二種情況,當(dāng)頁面在離開頂部一定距離的時(shí)候，回到頂部按鈕出現(xiàn)

---

接下就是對(duì)代碼的分析了：
在這里我們?nèi)绻褂脻L動(dòng)事件的話，小程序規(guī)定 最外層一定要使用scroll-view標(biāo)簽進(jìn)行包裹，然后在設(shè)置scroll-y=“true” 意思是允許頁面了縱向滾動(dòng)，scroll-top是滾動(dòng)到頂部做處理，一般綁定一個(gè)事件，bindscrolltolower同樣的原理，滾動(dòng)到底部做處理，bindscroll表示在滾動(dòng)的時(shí)候出發(fā)這個(gè)事件。下面WXML內(nèi)部的話，就是我們回到頂部的按鈕設(shè)置，我們?cè)邳c(diǎn)擊它時(shí)綁定一個(gè)事件goTop，讓他的滾動(dòng)高度等于0，這樣它就回到頂部了。

WXML代碼：

<scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}" bindscroll="scroll" bindscrolltolower= "scrolltolower" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">//*********************<view class="com-widget-goTop" bindtap="goTop" wx:if="{{floorstatus}}"><view class="icon-gotop">頂部</view></view>//*********************</view>

---

JS代碼：

//回到頂部按鈕Page({data: {scrollTop: 0},goTop: function(e){this.setData({scrollTop:0})},scroll:function(e,res){// 容器滾動(dòng)時(shí)將此時(shí)的滾動(dòng)距離賦值給 this.data.scrollTopif(e.detail.scrollTop > 500){this.setData({floorstatus: true});}else {this.setData({floorstatus: false});}})

---

WXSS代碼：

.bigWrap{background:#eee; } /*goTop回到頂部圖標(biāo)start*/ .com-widget-goTop {position: fixed;bottom: 125px;right: 5px;background: rgba(0,0,0,0.48);border-radius: 50%;overflow: hidden;z-index: 500; } .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;-webkit-background-size: 50px auto; }

總結(jié)

以上是生活随笔為你收集整理的小程序制作回到顶部按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。