当前位置: 首页 > news >正文

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

一、页面加载后滚动到指定位置,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
        })
    })
}

三、完整代码下载链接
https://download.csdn.net/download/weixin_43951315/90477341

相关文章:

  • ubuntu 设置允许root远程登录
  • c语言笔记 静态函数和递归函数
  • 基于PyTorch通信算子的分布式训练阻塞定位方法
  • emacs使用mongosh的方便工具发布
  • 为什么 JPA 可以通过 findByNameContaining 自动生成 SQL 语句?
  • The First项目报告:重塑 DeFi 流动性的革新者,ELX 即将登陆 The First
  • Vue 系列之:路由
  • 玩转python:通俗易懂掌握高级数据结构:collections模块之namedtuple
  • 【附JS、Python、C++题解】Leetcode面试150题(9)——三数之和
  • C语言基础知识04
  • 2025-03-10 学习记录--C/C++-PTA 习题11-4 字符串的连接
  • Mysql_DML
  • java中如何把json转化的字符串再转化成json格式
  • python画图文字显示不全+VScode新建jupyter文件
  • 《SQL性能优化指南:新手如何写出高效的数据库查询
  • C# 事件使用详解
  • CPT208 Human-Centric Computing 人机交互 Pt.1
  • vue3 动态添加路由并生成左侧菜单栏
  • JavaScript中Promise详解
  • 蓝桥杯2024年第十五届省赛真题-回文数组
  • 青岛市网站制作/网站搜索排名
  • 电脑培训网上课程/上海seo推广外包
  • 做购物网站数据库分析/免费b站推广网站详情
  • 关于网络编辑作业做网站栏目新闻的ppt/移动端优化
  • wordpress的安装教程视频/福州短视频seo公司
  • 上海网站建设网站制/推广品牌的方法