页面动态滑动事件如何实现?锚点如何实现?

在提交材料、页面互动时候,锚点是一个常用的东西,实现:

  • 应用场景
  • 测试场景
  • 测试源码

应用场景

在这里插入图片描述

测试场景

当点击submit时候,即可滑动到对应的id标签
在这里插入图片描述

测试源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;display: flex;flex-direction: column;gap: 20px;}div{color: white;background-color: black;height: 1000px;width: 105rem;}</style>
</head>
<body><button style="position: fixed;right: 0;" onclick="score('4')">submit</button><div id="1">1</div><div id="2">2</div><div id="3">3</div><div id="4">4</div><script>function score(id) {const res = document.getElementById(id)res.scrollIntoView({ behavior: 'smooth', block: 'start' })}</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/635821.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云架构(五)BBF模式

BFF模式&#xff08;Backends for Frontends pattern&#xff09;- https://learn.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends。 创建单独的后台服务用以提供给特定的前端或者接口。当你希望避免为多个接口定制单独的后台时&#xff0c;此模…

Jenkins和gitlab实现CICD

1 背景 在开发TracerBackend服务的时候&#xff0c;每次更改代码之后需要推送到gitlab&#xff0c;然后ssh登录到Ubuntu的服务器上部署新的代码。服务成功启动之后&#xff0c;在本地执行测试用例&#xff0c;觉得这一套操作流程还是挺复杂的。想起公司的代码发布流程&#xf…

黑马程序员Linux简单入门学习笔记

Linux介绍 内核提供系统最核心的功能&#xff0c;如: 调度CPU、调度内存、调度文件系统、调度网络通讯、调度等系统级应用程序&#xff0c;可以理解为出厂自带程序&#xff0c;可供用户快速上手操作系统&#xff0c;如:文件管理器、任务管理器、图片查看、音乐播放等 目录结构 …

【Java网络编程】网络编程中的基本概念及实现UDP、TCP客户端服务器程序

目录 一、什么是网络编程&#xff1f; 二、网络编程中的基本概念 1. 客户端和服务器 2. 请求和响应 三、Socket套接字 UDP数据报套接字编程 1. DatagramSocket 2. DatagramPacket 3. UDP回显客户端服务器程序 4. UDP字典客户端服务器程序 TCP流套接字编程 1. Serve…

嵌入式linux中利用QT控制蜂鸣器方法

大家好,今天给大家分享一下,如何控制开发板上的蜂鸣器。 第一:开发板原理图 从原理图中可以得出,当引脚输出低电平的时候,对应的蜂鸣器发出响声。 第二:QT代码详细实现 设置一个按钮,点击即可控制BEEP状态发生反转。 #ifndef MAINWINDOW_H #define MAINWINDOW_H#in…

从0到1实现RPC | 接入Apollo配置中心

一、代码实现 添加依赖 添加apollo客户端的依赖和spring配置相关依赖 添加监听器 通过实现ApplicationContextAware接口&#xff0c;获取Spring上下文。 使用ApolloConfigChangeListener注解监听命名空间rpc-demo-provider.yaml和默认的application.properties。 监听逻辑…

STL的map:ALV树和红黑树

ALV树 平衡因子的几种情况 单旋 双旋 红黑树 三种情况 第二种情况变种&#xff1a;不同的是折线要双旋 总结&#xff1a;

Python编程玩转二维码

文章目录 Python编程玩转二维码第一部分&#xff1a;背景介绍第二部分&#xff1a;qrcode库是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解决方案第七部分…

Oracle使用内部包自定义创建表空间和用户

如果之前有类似的表空间,可以使用dbms自动生成对应的表空间和数据文件 select dbms_metadata.get_ddl(TABLESPACE,ts.tablespace_name) from dba_tablespaces ts; 可以使用类似的 SQL> set echo off SQL> spool /data/logs/create_tablespace.log SQL> select dbms…

PACS系统源码 新一代的医学图像管理系统 pacs 云影像,PACS云胶片,PACS影像工作站系统源码

PACS系统源码 新一代的医学图像管理系统 pacs 云影像,PACS云胶片,PACS影像工作站系统源码 三甲医院医学影像PACS系统源码&#xff0c;集成三维影像后处理功能&#xff0c;包括三维多平面重建、三维容积重建、三维表面重建、三维虚拟内窥镜、最大/小密度投影、心脏动脉钙化分…

【c++】vector的使用

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 朋友们大家好&#xff0c;我们本篇来到一个新的容器&#xff0c;vector的讲解和使用 目录 1.vector简单介绍2.vector的使用2.1构造函数2.2遍历vector2.3对容量操作2.4vector的增删查改 1.v…

[ICCVW2023]EANet-提取与适应网络:用于3D交互手部网格恢复的网络

这篇论文的标题是《Extract-and-Adaptation Network for 3D Interacting Hand Mesh Recovery》&#xff0c;作者是JoonKyu Park, Daniel Sungho Jung, Gyeongsik Moon, 和 Kyoung Mu Lee。他们来自韩国首尔国立大学、Meta Reality Labs Research。 摘要 理解双手如何相互作用…