当前位置: 首页 > 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

http://www.dtcms.com/a/67510.html

相关文章:

  • 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年第十五届省赛真题-回文数组
  • 数据库之PostgreSQL详解(待补充)
  • 一文了解JVM的垃圾回收
  • BIG_EVENT
  • IDS 和 IPS 日志监控的重要性
  • JVM内存结构笔记05-直接内存
  • 深度学习----激活函数
  • VS Code 配置优化指南
  • 《大语言模型》学习笔记(一)
  • 大数据任务调度:DolphinScheduler、Airflow 实战(调度策略、任务依赖)
  • Swift 手动导入 RxSwift.xcframework 报错