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

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

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

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

// 坑点：这里设置了自定义导航部分，即搜索框和筛选条件，吸顶显示

// 商品列表部分

scroll-y="{{true}}"

bindscrolltolower="handleScrollBottom"

// 坑点：这里的样式内容是height: calc(100vh - 190rpx)，为了让上面的搜索框达到吸顶效果

class="good-list"

style="{{ isShowContent ? '' : 'display:none' }}"

>

你寻找的商品暂未上架

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

原因所在：

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

解决方法：

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

坑2:

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

解决方法：

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

wx.pageScrollTo({

scrollTop: -offsetHeight

});

坑3:

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