微信的scrollTop

微信内置浏览器中文档的scrollTop是通过document.body取的,而不是document.documentElement。

如果想要兼容常见浏览器,我们可以着么做:

// 取
let scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

// 设 (如果有更好的方法,请告诉我一下 0.0)
document.documentElement.scrollTop = document.body.scrollTop = 0;
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在微信小程序中添加“返回顶部”功能,可以使用以下步骤: 1. 在 WXML 文件中添加一个“返回顶部”按钮,并绑定一个点击事件。 ```html <view class="back-to-top" bindtap="backToTop"> <image src="/images/back-to-top.png"></image> </view> ``` 2. 在对应的 JS 文件中编写“返回顶部”功能的实现代码。 ```javascript Page({ data: { scrollTop: 0 }, // 点击“返回顶部”按钮 backToTop: function() { this.setData({ scrollTop: 0 }); }, // 监听页面滚动事件 onPageScroll: function(e) { if (e.scrollTop > 100) { this.setData({ showBackTop: true }); } else { this.setData({ showBackTop: false }); } } }) ``` 3. 在 CSS 文件中设置“返回顶部”按钮的样式。 ```css .back-to-top { position: fixed; bottom: 100rpx; right: 20rpx; width: 80rpx; height: 80rpx; background-color: #fff; border-radius: 50%; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 999; } .back-to-top image { width: 40rpx; height: 40rpx; } .back-to-top.show { opacity: 1; } ``` 4. 在 WXML 文件中添加一个“scroll-view”组件,并设置其“scroll-top”属性为“scrollTop”变量的值。 ```html <scroll-view scroll-y="true" scroll-top="{{scrollTop}}"> <!-- 省略内容 --> </scroll-view> ``` 5. 在对应的 JS 文件中监听页面滚动事件,并根据页面滚动的位置来控制“返回顶部”按钮的显示和隐藏。 ```javascript Page({ data: { scrollTop: 0, showBackTop: false }, // 点击“返回顶部”按钮 backToTop: function() { this.setData({ scrollTop: 0 }); }, // 监听页面滚动事件 onPageScroll: function(e) { if (e.scrollTop > 100) { this.setData({ showBackTop: true }); } else { this.setData({ showBackTop: false }); } } }) ``` 这样就可以实现“微信小程序返回顶部”的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值