按钮样式
wxml
<view class="topbtn" bindtap="gotopAction" wx:if="{{up_show}}">
<image src="./../../image/topimg.png"></image>
</view>
wxss
.topbtn{
position: fixed;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
bottom: 118rpx;
right: 27rpx;
}
.topbtn>image{
width: 100%;
height: 100%;
}
js
up_show:false, //初始值为false
// 监听页面滚动高度,控制回到底部按钮显示/隐藏
onPageScroll(e){
var that = this
if(e.scrollTop>70){
that.setData({
up_show:true
})
}else{
that.setData({
up_show:false
})
}
},
// 点击回到顶部按钮
gotopAction(){
wx.pageScrollTo({
scrollTop:0
})
}
实现效果:页面滑动到一定高度时 出现按钮 点击按钮 页面回到顶部