微信小程序实现回到顶部功能
发表时间:2020-9-24
发布人:葵宇科技
浏览次数:35
wxml:
<image class="go_top" src="../../images/gotop.png" hidden="{{!go_top_show}}" bindtap="goTop"></image>
wxss:
/* 回到顶部 */
.go_top{
width: 80rpx;
height: 80rpx;
position: fixed;
bottom: 50rpx;
right: 30rpx;
text-align: center;
box-sizing: border-box;
border-radius: 50%;
}
js:
data: {
go_top_show: false
},
// 获取滚动条当前位置
height="580" src="https://img-blog.csdnimg.cn/2020092417275416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ2Nzg5,size_16,color_FFFFFF,t_70" width="328" />
参考:https://blog.csdn.net/sxs1995/article/details/80091924