本文介绍如何通过类选择器和事件批量绑定，避免重复调用 document.getElementById()，高效实现多个元素点击后统一滚动至页面顶部的功能。
本文介绍如何通过类选择器和事件批量绑定，避免重复调用 document.getelementbyid()，高效实现多个元素点击后统一滚动至页面顶部的功能。
在实际前端开发中，若为每个可交互区域（如导航锚点、卡片标题等）单独分配唯一 ID（如 id="top1"、id="top2"），再逐个用 document.getElementById() 获取并绑定事件，不仅代码冗余、难以维护，还违背了“关注点分离”与“DRY（Don’t Repeat Yourself）”原则。
正确的做法是语义化地使用 class 而非冗余 ID：将所有需触发“返回顶部”行为的元素统一赋予相同类名（例如 class="scroll-to-top"），再通过 document.querySelectorAll() 批量获取，并使用 forEach() 为每个元素绑定事件监听器。
✅ 推荐实现方式如下：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
<!-- HTML 结构示例 --> <div class="scroll-to-top">回到顶部 1</div> <div class="scroll-to-top">回到顶部 2</div> <div class="scroll-to-top">回到顶部 3</div>
// JavaScript：单次定义，全局生效
document.querySelectorAll('.scroll-to-top').forEach(element => {
element.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth' // 可选：启用平滑滚动，提升用户体验
});
});
});⚠️ 注意事项：
-
document.getElementById()仅接受单个 ID 字符串，不支持逗号分隔或批量查询（如"top1, top2"是无效语法）； - ID 在 HTML 中必须唯一，滥用多个相似 ID（
top1/top2）会破坏语义规范，也可能导致无障碍访问（a11y）问题； - 若后续需区分不同元素的行为（如跳转至不同锚点），建议改用
data-*属性（如data-target="#section1"），配合通用逻辑动态解析，而非依赖 ID 编号； - 使用
behavior: 'smooth'需注意浏览器兼容性（现代主流浏览器均支持，IE 不支持；如需兼容旧环境，可降级为window.scrollTo(0, 0)）。
总结：用语义化 class 替代编号式 ID，结合 querySelectorAll + forEach 实现批量事件绑定，既简洁可靠，又便于扩展与维护——这是现代 DOM 操作的标准实践。
