JavaScript中scrollToElement函数instance参数作用及与elements.length的关系

先看你提供的核心函数代码：

function scrollToElement(elementSelector, instance = 0) {
  const elements = document.querySelectorAll(elementSelector);
  if (elements.length > instance) {
    elements[instance].scrollIntoView({
      behavior: "smooth"
    });
  }
}

1. instance参数的作用 #

instance用来指定要滚动到的目标元素在匹配列表中的位置下标：

• document.querySelectorAll(elementSelector)会返回页面中所有匹配该选择器的元素，这些元素按DOM中的出现顺序排列，下标从0开始计数。
• 默认值0表示滚动到第一个匹配的元素；如果传入1，就滚动到第二个匹配元素，以此类推。
• 举个实际场景：如果页面有3个带.header类的元素，调用scrollToElement(".header", 2)就会滚动到第三个.header元素。

2. elements.length与instance的关系 #

• elements.length是当前选择器匹配到的元素总数量，instance是你要定位的元素的下标。
• 条件elements.length > instance是做越界保护：
  • 元素下标从0开始，比如有3个元素时，最大有效下标是2（0、1、2）。如果传入的instance值大于等于元素总数，elements[instance]会是undefined，直接调用scrollIntoView会触发报错。
  • 加这个判断能确保只有当目标下标对应的元素存在时，才执行滚动操作，避免代码出错。

比如你代码里link1的点击事件调用scrollToElement(".header")，就是默认滚动到第一个.header元素。

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