微信小程序 回到顶部按钮滚动到特定位置出现与点击回跳功能 ...

WXML：

1.   
2.   <view class="to_top_view" bindtap="toTop" hidden="{{!showToTop}}">
3.     <image src="/resources/images/carBuying/to_top.png" mode="widthFix"></image>
4.   </view>

复制代码

JS：

1.   data: {
2.     showToTop: false
3.   },
5.   /**
6.    * 方法区
7.    */
9.   //  点击回到顶部
10.   toTop() {
11.     wx.pageScrollTo({
12.       scrollTop: 0,
13.       duration: 500,
14.     })
15.   },
17.    /**
18.    * 用户滚动页面时
19.    */
20.   onPageScroll(e) {
21.     if (e.scrollTop > 780) {
22.       this.setData({
23.         showToTop: true
24.       })
25.     } else {
26.       this.setData({
27.         showToTop: false
28.       })
29.     }
30.   }

复制代码

WXSS：

1. .to_top_view {
2.   display: flex;
3.   justify-content: center;
4.   align-items: center;
5.   position: fixed;
6.   right: 3%;
7.   bottom: 1%;
8.   width: 100rpx;
9.   height: 100rpx;
10.   z-index: 1;
11. }

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！