小程序返回顶部示例

布满荆棘的人生 2023-06-06 05:00 1阅读 0赞

**1:wxml**

<cover-image src='/img/backTop.png' class='goTop' hidden='{
       {!floorstatus}}' bindtap="goTop"/>

**2:wxss**

/* 返回顶部 */
    .goTop{
      height: 80rpx;
      width: 80rpx;
      position: fixed;
      bottom: 50rpx;
      background: rgba(0,0,0,.3);
      right: 30rpx;
      border-radius: 50%;
    }

**3:js**

Page({
      data: {
         
      },
    
      // 获取滚动条当前位置
      onPageScroll: function (e) {
        console.log(e)
        if (e.scrollTop > 100) {
          this.setData({
            floorstatus: true
          });
        } else {
          this.setData({
            floorstatus: false
          });
        }
      },
    
      //返回顶部
      goTop: function (e) {  // 一键返回顶部
        if (wx.pageScrollTo) {
          wx.pageScrollTo({
            scrollTop: 0
          })
        } else {
          wx.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
          })
        }
      }, 
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关实现一个简单的返回顶部示例

思路：要实现一个点击后能返回顶部的按钮，首先得创建一个容器，并需要设置它的style\{overflow : auto\}。然后，我们需要给容器添加一个监听器，监听滚动事件，当

骑猪看日落/ 2023年10月14日 23:34/ 0 赞/ 77 阅读

相关返回顶部

\goTopBtn\{width:50px;height:50px;background:\2f6795;color:\fff;font-size:18px;position:

野性酷女/ 2023年07月25日 09:55/ 0 赞/ 48 阅读

相关小程序返回顶部示例

1:wxml  <cover-image src='/img/backTop.png' class='goTop' hidde

布满荆棘的人生/ 2023年06月06日 05:00/ 0 赞/ 2 阅读

相关小程序返回到顶部

1. wxml <scroll-view scroll-y lower-threshold="100" id="scroller" bindscrolltolowe

Myth丶恋晨/ 2022年12月29日 09:35/ 0 赞/ 201 阅读

相关【小程序】返回到顶部的实现方式

> `前言` 返回到顶部的实现方式：[https://github.com/dcloudio/uni-app/blob/master/docs/component/scrol

冷不防/ 2022年11月22日 00:23/ 0 赞/ 205 阅读

相关返回顶部

点击返回顶部，简单易学效果图： ![Center][] 第一步：将返回按钮fixed到具体位置后隐藏第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐

拼搏现实的明天。/ 2022年08月18日 12:23/ 0 赞/ 373 阅读

相关返回顶部效果!

刚刚需要为网页添加一个返回顶部的效果，又懒得自己写，百度了一下找到两个还不错的。这里分享给大家。 <!DOCTYPE html> <html lang="en"> <

妖狐艹你老母/ 2022年06月04日 06:15/ 0 赞/ 387 阅读

相关返回顶部demo

一、html 页面代码如下 <!doctype html> <html lang="en"> <head> <meta charset

Love The Way You Lie/ 2022年01月22日 07:05/ 0 赞/ 358 阅读

相关小程序回到顶部

onPageScroll: function (e) { // console.log(e) if (e.scrollTop > 100

左手的ㄟ右手/ 2021年12月12日 02:11/ 0 赞/ 388 阅读

相关实现返回顶部-wepy小程序-前端梳理

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3

﹏ヽ暗。殇╰゛Y/ 2021年09月19日 10:16/ 0 赞/ 397 阅读