jQuery实现点击按钮滚动到下一个col-md-6（不限制为同级元素）

问题根源 #

原有代码仅在当前col-md-6的同级节点中查找下一个元素，每行第二个col-md-6没有同级后续元素，因此点击后无响应。

核心思路 #

不局限于同级节点查找，先获取页面中所有col-md-6元素的有序集合（顺序和DOM渲染顺序完全一致），定位当前元素在集合中的索引后，直接取下一个索引对应的元素即可，该方案天然适配移动端响应式布局下元素变为col-md-12后的逐列滚动需求。

修复后的JS代码 #

$(".btn").click(e => {
  // 定位当前按钮所属的col-md-6元素
  const currentCol = $(e.target).closest('.col-md-6');
  // 获取页面所有col-md-6元素的集合
  const allCols = $('.col-md-6');
  // 获取当前元素在全局集合中的索引
  const currentIndex = allCols.index(currentCol);
  // 存在下一个元素时执行滚动
  if (currentIndex < allCols.length - 1) {
    const nextCol = allCols.eq(currentIndex + 1);
    $('html, body').animate({
      scrollTop: nextCol.offset().top
    }, 2000);
  }
});

代码说明 #

• closest('.col-md-6')相比parents方法更精准，只会匹配最近的符合条件的父元素，避免嵌套结构下的匹配异常
• 全局索引查找逻辑不受父级row容器的限制，不管col元素分布在多少个不同的row下，都能按页面渲染顺序找到下一个col元素
• 增加了边界判断，点击最后一个col内的按钮时不会执行无效操作

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