如何使用jQuery简化多元素的scrollIntoView功能实现？

核心思路 #

原代码通过索引绑定按钮与对应指示器，盒子数量增加时会产生大量重复代码。改用jQuery的DOM遍历功能，让每个按钮自动定位到所属盒子内的指示器，无需依赖索引，实现代码的可扩展性。

jQuery代码实现 #

// 需先引入jQuery库
$('.btn').on('click', function() {
  // 从点击的按钮向上找到父级.box，再定位内部的.indicator
  $(this).closest('.box').find('.indicator')[0].scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
});

完整代码示例 #

HTML

<div class="wrapper">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="box">
    <h1 class="Title"><span class="indicator">.</span>Hello World</h1>
    <p>Stack Overflow是程序员的问答网站，是Stack Exchange网络的旗舰站点，由Jeff Atwood和Joel Spolsky于2008年创建，专注于各类编程主题的问答。2021年8月，Prosus以18亿美元收购Stack Overflow，将其纳入教育技术产品组合。</p>
    <button class="btn">滚动到视图中部</button>
  </div>
  <div class="box">
    <h1 class="Title"><span class="indicator">.</span>Hello World</h1>
    <p>Stack Overflow是程序员的问答网站，是Stack Exchange网络的旗舰站点，由Jeff Atwood和Joel Spolsky于2008年创建，专注于各类编程主题的问答。2021年8月，Prosus以18亿美元收购Stack Overflow，将其纳入教育技术产品组合。</p>
    <button class="btn">滚动到视图中部</button>
  </div>
  <!-- 可任意添加更多.box元素 -->
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- 此处引入jQuery库 -->
<script>
$('.btn').on('click', function() {
  $(this).closest('.box').find('.indicator')[0].scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
});
</script>

CSS（保持原样式不变）

* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  display: flex;
  justify-content: center;
  text-align: center;
}

h1,
p {
  color: white;
}

.wrapper {
  width: 90%;
  margin-top: 10px;
}

.box {
  margin: 10px;
  background: red;
}

.indicator {
  position: absolute;
  margin-top: -220px;
  color: red;
  opacity: 0;
}

.btn {
  width: 60%;
  margin: auto;
  padding: 6px;
  font-size: 20px;
  border: none;
  margin-bottom: 8px;
}

关键优势 #

• 无冗余代码：无论添加多少个盒子，JS代码无需修改
• 逻辑清晰：按钮与指示器通过所属盒子关联，避免索引匹配错误
• 功能完整：保留平滑滚动、定位到起始位置的原有效果

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