小程序锚点滚动跳转实现

小程序根据标签id滚动至对应标签处

解决小程序无法利用锚点跳转的缺陷

wxml:

// 控制区
<view catchtap="scroolTo" data-id="top">回顶部</view>
<view catchtap="scroolTo" data-id="bottom">去底部</view>

// 目标位置
<view id="top"></view>
<view id="bottom"></view>

js:

    scroolTo: function (e) {
        let page = this
        let id =  e.currentTarget.dataset.id
        let scroolObj = wx.createSelectorQuery().in(page)
        scroolObj.selectViewport().scrollOffset()
        scroolObj.select("#" + id).boundingClientRect()
        scroolObj.exec(function (res) {
            console.log(res);
            let scrollTop = res[0].scrollTop + res[1].top - 30; //这里-30可忽略，项目需要
            wx.pageScrollTo({
                scrollTop,
                duration: 100
            });
        });
    },