Javascript 两种不同阵列的加法器侦听器.forEach.代码优化

我刚刚开始学习javascript。我有一个问题要找到一个改进这个代码

是否可以在一个函数中包含“document.queryselectoral”中的两个不同数组，或者以其他方式优化下面的代码？我知道如何使用一个，但是，我不知道如何组合按钮和部分，从一个数组的第一个元素（按钮[0]）到另一个数组的第一个元素（部分[0]）？。我怎样才能使这段代码更好，更短，更灵活

谢谢你的帮助

function scrollSections(element) {
  window.scrollTo({
    'behavior': 'smooth',
    'left': 0,
    'top': element.offsetTop
  });
}

const btns = document.querySelectorAll('.js-btn');
const sections = document.querySelectorAll('.js-section');

btns[0].addEventListener('click', () => {
  scrollSections(sections[0]);
});

btns[1].addEventListener('click', () => {
  scrollSections(sections[1]);
});

btns[2].addEventListener('click', () => {
  scrollSections(sections[2]);
});

btns[3].addEventListener('click', () => {
  scrollSections(sections[3]);
});

---

是的，使用

forEach

循环，如下所示：

const btns = document.querySelectorAll('.js-btn');
const sections = document.querySelectorAll('.js-section');
btns.forEach((btn, index) => btn.addEventListener("click", () => scrollSections(sections[index])));

---

您可以尝试添加一个

forEach

并使用它的索引

功能滚动部分（元素）{
window.scrollTo({
“行为”：“平滑”，
“左”：0，
“顶部”：element.offsetTop
});
}
const btns=document.querySelectorAll（'.js btn'）；
const sections=document.querySelectorAll（'.js section'）；
btns.forEach（（项目、索引）=>{
item.addEventListener（'单击'，（e）=>{
滚动部分（索引）
})
})

NodeList对象是节点的集合，通常由Node.childNodes等属性和document.querySelectorAll（）等方法返回

但正如我所看到的，您尝试平滑地滚动页面，我建议您采用另一种方式。请看一下这个

这是一种更好的方法，因为您不依赖于节数组中的元素位置，所以失败点更少

注意：我使用数据属性是因为codesandbox破坏了锚URL，您可以将它们切换到

event.target.href

Good to know:）感谢您为本例展示了另一种方法。

const btns = document.querySelectorAll('.js-btn');

btns.forEach( (btn, index) => {
  btn.addEventListener('click', () => {
    scrollSections(sections[index]);
  });
});