uniapp的返回頂部按鈕

效果圖：

 

1、HTML部分

        <!-- 返回頂部按鈕 -->
        <view class="back-btn" @click="toTop" :style="{'display':(flag===false? 'none':'block')}">
            <image src="../../static/toTop1.png" class="back-btn_img"></image>
        </view>

 

2、JS部分

            // 返回頂部
            toTop() {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 100,
                });
            },
            onPageScroll(e) { //根據距離頂部距離是否顯示回到頂部按鈕
                if (e.scrollTop > 1000) { //當距離頂部大於1000時顯示回到頂部按鈕
                    this.flag = true
                } else {
                    this.flag = false
                }
            }

 

3、CSS部分

    /* 返回頂部 */
    .back-btn {
        position: fixed;
        right: 40rpx;
        z-index: 9999;
        bottom: 150rpx;
        color: #353535;
        
        .back-btn_img {
            // width: 70rpx;
            // height: 160rpx;
            width: 70rpx;
            height: 70rpx;
        }
    }