如何用单个函数实现多个带ID元素点击返回文档顶部？

原代码问题分析 #

document.getElementById() 仅支持传入单个ID字符串，你传入的"top1, top 2, top3"是一个完整的字符串，不存在匹配这个ID的元素，所以获取到的是null，无法绑定点击事件。

解决方案 #

方案1：通过属性选择器匹配多个ID元素

直接选择所有ID以top开头的元素，遍历绑定同一个返回顶部函数：

// 选择所有ID以top开头的元素（匹配top1、top2、top3...）
const topElements = document.querySelectorAll('[id^="top"]');

// 定义通用返回顶部函数
function scrollToTop() {
  // 普通滚动到顶部
  window.scrollTo(0, 0);
  // 可选：平滑滚动效果
  // window.scrollTo({ top: 0, behavior: 'smooth' });
}

// 给每个元素绑定点击事件
topElements.forEach(element => {
  element.addEventListener('click', scrollToTop);
});

如果需要精准指定某几个ID，也可以直接列出：

const topElements = document.querySelectorAll('#top1, #top2, #top3');

方案2：统一类名（更推荐）

给所有需要触发返回顶部的盒子添加同一个类名（比如scroll-to-top），通过类选择器批量获取元素，后续新增盒子只需加类名即可，无需修改JS：

<!-- HTML部分：给盒子添加统一类名 -->
<div id="top1" class="scroll-to-top">盒子1</div>
<div id="top2" class="scroll-to-top">盒子2</div>
<div id="top3" class="scroll-to-top">盒子3</div>

// JS部分
const scrollElements = document.querySelectorAll('.scroll-to-top');

function scrollToTop() {
  window.scrollTo(0, 0);
}

scrollElements.forEach(el => el.addEventListener('click', scrollToTop));

内容的提问来源于stack exchange，提问作者Fabrizio