本文详解因重复 id 导致页面意外滚动至顶部的根本原因，并提供符合 html 规范、可稳定运行的修复方案，包括语义化结构调整、事件委托优化与平滑滚动增强。
本文详解因重复 id 导致页面意外滚动至顶部的根本原因，并提供符合 html 规范、可稳定运行的修复方案，包括语义化结构调整、事件委托优化与平滑滚动增强。
在开发交互式游戏选择器等列表型页面时，常遇到“点击复选框后页面瞬间跳回顶部”的问题。这并非浏览器 Bug，而是由违反 HTML 基本规范引发的连锁反应——重复使用 id="video-game" 是罪魁祸首。
HTML 标准明确规定：id 属性值在整个文档中必须唯一。当 JavaScript 执行 document.getElementById("video-game") 时，浏览器仅返回第一个匹配元素（通常位于文档开头），而后续同名 id 被忽略。更严重的是，若该首个 <li id="video-game"> 位于可视区域外，scrollIntoView() 会强制将视口滚动至该无效锚点，同时复选框默认表单行为（尤其在未阻止默认事件时）可能触发页面重载或锚点跳转，最终表现为“页面闪退至顶部”。
✅ 正确做法：用 class 替代重复 id，并精准定位目标元素
首先，将所有 <li id="video-game"> 统一改为 <li class="video-game">，并在 CSS 中更新选择器：
.video-game label {
display: block;
position: relative;
overflow: hidden;
}接着，重写 scrollToGame() 函数，使其基于当前被点击的复选框向上查找最近的 .video-game 父元素，确保滚动目标精准无误：
立即学习“前端免费学习笔记（深入）”；
function scrollToGame(event) {
// 阻止默认行为（避免潜在表单提交或锚点跳转）
event.preventDefault();
// 获取被点击的 checkbox 元素
const checkbox = event.target;
// 向上查找最近的 .video-game 父容器（即对应游戏项）
const gameItem = checkbox.closest('.video-game');
if (gameItem) {
gameItem.scrollIntoView({
behavior: 'smooth',
block: 'center' // 垂直居中显示，提升用户体验
});
}
}同时，将 HTML 中所有内联 onclick 替换为现代事件监听方式（推荐），避免全局函数污染且便于维护：
<!-- 移除所有 onclick="scrollToGame()" --> <input type="checkbox" />
并在 <script> 底部添加统一事件委托：
// 为所有复选框绑定事件（支持动态添加）
document.addEventListener('click', function(e) {
if (e.target.type === 'checkbox') {
e.preventDefault(); // 关键：阻止默认行为
const gameItem = e.target.closest('.video-game');
if (gameItem) {
gameItem.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
}
});⚠️ 其他关键注意事项
- 移除无效的初始自动点击逻辑：原代码中 games[checkbox].click() 会触发未经绑定的 onclick，且因 id 冲突导致不可预测行为。若需初始化随机选中，应配合事件委托安全执行。
-
语义化结构优化：<img> 直接置于 <ul> 内不符合 HTML 规范（<ul> 只允许 <li> 作为直接子元素）。建议将每组“封面图 + 游戏名 + 复选框”封装为独立 <li>：
<li class="video-game"> <img src="./Game Covers/.../cover.png" alt="Call of Duty 3 cover"> <label> <input type="checkbox"> Call of Duty 3 </label> </li> - 无障碍增强：为 <input> 添加 aria-label 或关联 <label> 的 for 属性，提升屏幕阅读器兼容性。
通过以上重构，不仅彻底解决滚动异常，更使代码具备可维护性、可访问性与跨浏览器稳定性。记住：唯一 ID 是 HTML 的铁律，而 closest() 与事件委托是现代 DOM 操作的基石。
