HTML在线考试答题表单的快速定位通过题号锚点+平滑滚动实现一键跳转，同步答题卡状态并支持键盘数字键+Enter导航、sticky固定定位与双栏布局。
实现 HTML 在线考试答题表单中答题卡的快速定位，核心是让考生能一键跳转到指定题号、实时同步题目与答题卡状态，并支持键盘导航和视觉反馈。不需要复杂框架，纯 HTML + CSS + JavaScript 就能高效完成。
题号锚点 + 平滑滚动（最简可行方案）
为每道题的容器设置唯一 ID（如 id="q1"、id="q5"），答题卡上的题号按钮使用 @#@#@#@#@#@#@#@#@#@0 链接即可原生跳转。配合 CSS 启用平滑滚动：
html { scroll-behavior: smooth; }
这样点击“第12题”就自动滚动到对应题目区域，无需 JS 也能工作，兼容性好、性能高。
答题卡高亮 + 状态同步（提升交互体验）
当用户在题目区操作（输入、选择、失焦），自动标记该题在答题卡中的状态（如已答、未答、标记复查）。关键逻辑：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 监听题目区域的
change或blur事件 - 根据答案是否为空/有效，给对应答题卡项（如
#card-q3）添加类名answered或marked - 用 CSS 控制样式：
.answered { background: #4CAF50; color: white; }
这样考生扫一眼答题卡，就能立刻识别哪些题已完成、哪些需回头检查。
键盘快捷定位（提升效率的关键细节）
支持数字键 + Enter 快速跳转：按下 5 键不松开，再按 Enter，直接定位第 5 题。实现方式简洁：
- 全局监听
keydown，记录按下的数字（缓存为临时题号） - 按下
Enter时，拼出目标 ID（如"q" + cachedNum），调用element.scrollIntoView({ behavior: 'smooth' }) - 支持两位数题号（如先按
1再按2→ 跳转 q12），加个计时器清空缓存避免误触
答题卡固定定位 + 滚动跟随（保持始终可见）
将答题卡容器设为 position: sticky; top: 1rem;，并包裹在有明确高度的父容器中。这样在长试卷滚动时，答题卡始终悬浮在视口左/右侧，题号不消失。建议搭配左右双栏布局：
- 左侧 30% 宽度放答题卡（带横向滚动，适应百题以上）
- 右侧 70% 放题目内容
- 答题卡内题号使用
display: inline-block+ 固定宽高，保证整齐易扫视
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
