微信小程序-实现锚点跳转，页面加载后自动跳转、点击跳转到指定位置

Good Lucky

于 2025-03-12 14:36:48 发布

阅读量823

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_43951315/article/details/146204689

版权

微信小程序专栏收录该内容

20 篇文章

订阅专栏

一、页面加载后滚动到指定位置，onLoad或onReady里执行。

scrollAfterLoading() {
    const query = wx.createSelectorQuery()
    query.select('#cont1').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
        wx.pageScrollTo({
            scrollTop: res[0].top
        })
    })
}

二、点击事件，跳转到指定ID位置，需要位置bind:tap就可以了。

scrollToAnchor: function () {
    const query = wx.createSelectorQuery()
    query.select('#cont2').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
        wx.pageScrollTo({
            scrollTop: res[0].top + res[1].scrollTop
        })
    })
}