微信小程序之将页面滚动到顶部或者目标位置wx.pageScrollTo

将页面滚动到指定位置有两种情况：

1. 页面滚动到顶部；
2. 滚动到某个元素的位置；

wx.pageScrollTo()可以实现以上两种需求，具体用法如下

综上：
对于情况一，页面滚动回顶部，直接设置scrollTop: 0：

wx.pageScrollTo({
  scrollTop: 0
});

注意：重点！重点！重点！
以上代码要生效的前提是，当前页面高度超过一屏

对于情况二，滚动到目标位置，需要用selector

wx.pageScrollTo({
  selector: '#hot-title', // 写法同css选择器
  success: data => {
    console.log('scroll success', data); // {errMsg: "pageScrollTo:ok"} 打印的日志信息就很迷惑，明明是操作成功，属性名却叫‘errMsg’
  },
  fail: data => {
    console.log('scroll fail', data)
  }
});

注意：重点！重点！重点！
使用selector选择器来指定滚动的目标时，就不要再设置scrollTop了，会导致滚动失效

---

道理很简单，遇坑在所难免

---

坑1:

一个商品列表页面，顶部有筛选条件，期望点击不同的筛选条件后，商品列表页滚到顶部
采用了情况一里的写法，但实际上没效果。

代码结构如下：

// wxml
<view class="search-goods">
  <view class="search-top">
    // 坑点：这里设置了自定义导航部分，即搜索框和筛选条件，吸顶显示
  </view>
// 商品列表部分
  <scroll-view
  	scroll-y="{{true}}"
    bindscrolltolower="handleScrollBottom"
    // 坑点：这里的样式内容是height: calc(100vh - 190rpx)，为了让上面的搜索框达到吸顶效果
    class="good-list" 
    style="{{ isShowContent ? '' : 'display:none' }}"
  >
    <card-list id="card-list" />
    <view class="empty" wx:if="{{ showEmpty }}">
      <view class="empty-block">
        <image mode="widthFix" src="https://b.yzcdn.cn/public_files/f16ee9ba881d8a7e97e6cb9204fc9abe.png" />
        <view class="empty-text">你寻找的商品暂未上架</view>
      </view>
    </view>
  </scroll-view>
</view>

以上页面样子差不多是这个样子的⬇️：

原因所在：

问题就出在scroll-view上，在css里设置里高度， 所以整个页面高度刚好一屏，是触发不了wx.pageScrollTo

解决方法：

• 通过position:sticky实现搜索框吸顶效果
• 商品列表不用 scroll-view标签包裹，改用普通的view标签
• scroll-view绑定的滑到底部加载更多bindscrolltolower="handleScrollBottom"，用onReachBottom来代替

---

坑2:
坑1滚动到顶部的效果有了之后，新的问题来了，应为搜索框是自定义的导航，scrollTop：0时，微信小程序并不会计算这部分的高度

解决方法：

1. 计算出目标位置距离顶部的高度值 offsetHeight
2. 设置scrollTop的值，向上滚动是正值，向下滚动是负值

wx.pageScrollTo({
  scrollTop: -offsetHeight
 });

---

坑3:

页面上如果有动态加载的模块，在用selector滚动到目标位置时，必须要确保目标挂载时候，再用selector选择器实现滚动，否则会没有效果。