点击Checkbox后页面自动滚顶的问题及随机滚动需求求助

你的代码存在几个核心问题导致滚动异常：

1. 重复使用唯一ID：所有游戏项的<li>都用了id="video-game"，但HTML中ID必须唯一，document.getElementById()只会返回页面中第一个匹配的元素，所以无论点击哪个复选框，都会滚动到第一个游戏项，进而引发页面滚动混乱。

2. 滚动目标错误：scrollToGame()函数没有关联当前点击的复选框对应的游戏项，而是固定获取第一个元素，完全不符合“滚动到当前点击元素”的需求。

3. 初始化逻辑的滚动缺失：页面加载时自动点击随机复选框，但没有触发对应的滚动，这部分逻辑也需要补全。

修复后的完整代码 #

CSS 部分（修正选择器）

ul.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul > li.video-game {
  font-family: Arial, Helvetica, sans-serif;
}

ul > img {
  width: 110px;
  height: 130px;
}

.video-game label {
  display: block;
  position: relative;
  overflow: hidden;
}

HTML 部分（替换ID为Class）

<body>
<div>
   <div>
      <h2>Microsoft Xbox</h2>
         <ul class="no-bullets">
            <img src="./Game Covers/Microsoft/Microsoft Xbox/call of duty 3.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Call of Duty 3</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/phantasy star online episode i & ii.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Phantasy Star Online Episode I</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/phantasy star online episode i & ii.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Phantasy Star Online Episode II</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/shrek.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Shrek</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/soulcaliber ii.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>SoulCalibur II</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/spiderman 2.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Spider-Man 2</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/star wars episode iii.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Star Wars Episode III: Revenge of the Sith</li>
         </ul>
   </div>
   
   <div>
      <h2>Microsoft Xbox 360</h2>
         <ul class="no-bullets">
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/assassins creed ii.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Assassin's Creed II</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/assassins creed brotherhood.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Assassin's Creed: Brotherhood</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/bully scholarship edition.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Bully: Scholarship Edition</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/dead rising 2 off the record.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Dead Rising 2: Off The Record</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/homefront.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Homefront</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/madden nfl 11.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Madden NFL 11</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/rage anarchy edition.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Rage [Anarchy Edition]</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox 360/ufc undisputed 2010.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>UFC Undisputed 2010</li>
         </ul>
   </div>
       
   <div>
      <h2>Nintendo Entertainment System</h2>
         <ul class="no-bullets">
            <img src="./Game Covers/Nintendo/Nintendo NES/mickey mousecapade.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Mickey Mousecapade</li>
            <img src="./Game Covers/Nintendo/Nintendo NES/super mario bros duckhunt.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Super Mario Bros. / Duck Hunt (Focus on Mario Bros, Try to Establish a Score for Duck Hunt)</li>
            <img src="./Game Covers/Nintendo/Nintendo NES/teenage mutant ninja turtles.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Teenage Mutant Ninja Turtles</li>
            <img src="./Game Covers/Nintendo/Nintendo NES/tetris.png">
            <li class="video-game"><label><input type="checkbox" onclick="scrollToGame(event)"/></label>Tetris</li>
         </ul>
   </div>
</div>

<script>
   // 页面加载时随机选择未勾选的游戏并滚动到对应位置
   const games = document.querySelectorAll("input[type=checkbox]:not(:checked)");
   if (games.length > 0) {
      const randomIndex = Math.floor(Math.random() * games.length);
      const targetCheckbox = games[randomIndex];
      targetCheckbox.click();
      // 滚动到对应的游戏项
      const targetLi = targetCheckbox.closest('.video-game');
      targetLi.scrollIntoView({ behavior: "smooth" });
   }

   function scrollToGame(event) {
      // 获取当前点击复选框所在的游戏项
      const targetLi = event.target.closest('.video-game');
      targetLi.scrollIntoView({
         behavior: "smooth"
      });
   };
</script>

</body>

关键修改点说明 #

1. ID改Class：将所有<li>的id="video-game"改为class="video-game"，确保HTML语义正确，同时允许通过closest()方法定位当前元素。
2. 滚动目标关联：scrollToGame()函数接收event参数，通过event.target.closest('.video-game')精准找到当前点击复选框所在的游戏项，实现点击哪个就滚动到哪个。
3. 初始化滚动补全：页面加载时随机点击复选框后，添加了滚动到对应游戏项的逻辑，完成需求闭环。
4. 移除重复ID的ul：原代码中多个<ul>使用了相同的id="games"，同样违反ID唯一性规则，已删除该重复ID（如果需要用ul做选择器，可改为class）。

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