小程序锚点滚动跳转实现

最新推荐文章于 2025-03-12 14:36:48 发布

原创最新推荐文章于 2025-03-12 14:36:48 发布 · 447 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #js

小程序进阶专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在小程序中通过JavaScript实现页面滚动到指定标签位置，从而弥补小程序不支持锚点跳转的不足。通过在WXML中设置触发事件和目标标签，JS部分使用wx.createSelectorQuery()进行查询，并结合wx.pageScrollTo()方法实现平滑滚动效果。

小程序根据标签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
            });
        });
    },