纯javascript可实现答题卡题号点击跳转与高亮：为题目容器设唯一id（如q1）、按钮用data-qid匹配，点击时scrollintoview平滑滚动并添加active类；通过scroll-margin-top或手动计算偏移避开固定头部；支持方向键切换和enter跳转，需确保id一致且dom加载后绑定事件。

考试答题卡的快速定位跳转，核心是让点击题号时页面自动滚动到对应题目区域，并高亮当前题——不依赖插件，纯 JavaScript 就能高效实现。

题号绑定唯一 ID，建立映射关系

每道题的容器（如 <div class="question">）必须有明确、可预测的 ID，比如 <code>q1、q2…q50。答题卡上的题号按钮也用相同编号，例如：
<button data-qid="3">3</button>
这样就能通过 data-qid 值精准匹配目标题目的 ID。

点击触发平滑滚动到目标元素

给所有题号按钮统一绑定点击事件，用 scrollIntoView 实现原生平滑滚动：

• 获取点击按钮的 data-qid 值
• 拼出对应题目容器的 ID（如 "q" + qid）
• 调用 document.getElementById(id).scrollIntoView({ behavior: "smooth", block: "center" })
• 顺便移除之前高亮的题号，给当前按钮加个 active 类表示选中

处理滚动偏移与视觉聚焦

如果页面有固定头部（如导航栏），直接滚动可能被遮挡。解决方法是在滚动前计算偏移量：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

• 用 getBoundingClientRect() 获取目标元素相对于视口的顶部位置
• 减去头部高度（如 60 像素），再调用 window.scrollTo() 手动滚动
• 或更简单：给 设置 scroll-margin-top: 60px（CSS），scrollIntoView 会自动避开顶部遮挡

键盘支持与用户体验增强

考生常习惯用方向键或回车切换题目。可以补充：

• 监听 keydown，捕获 ArrowUp/ArrowDown 切换当前激活题号
• 按 Enter 触发跳转（需先聚焦题号按钮）
• 滚动完成后，自动将焦点移到题目输入框（如 textarea 或 input），方便立即作答

不复杂但容易忽略的是：确保所有题号按钮和题目容器的编号严格一致、ID 不重复，且 DOM 加载完成后再绑定事件——推荐用 DOMContentLoaded 或把脚本放 前。