导航栏不再滚动到页面上的部分？

Question

我向导航栏添加了一个 li，突然间，每当我单击菜单项时，它就不再滚动。我需要使用 Javascript 让我的导航栏滚动到我的部分。这是我用 Javascript 创建的导航栏const navMenu = document.querySelectorAll("section");const navList = document.getElementById("navbar__list");const items = ["Section 1", "Section 2", "Section 3", "Section 4"];//Build the navitems.forEach((item, i) => {  const el = document.createElement("a");  el.innerText = item;  el.classList.add("menu-items");  el.setAttribute("id", `menu-${i + 1}`);  el.href = `#section${i + 1}`;  navList.appendChild(el);  const li = document.createElement("li");  li.classList.add("menu-list");  li.appendChild(el);  // Append the list item to the list  navList.appendChild(li);});//Make Nav Active when Clicked and scrolls down to sectiondocument.addEventListener("click", function (event) {  let active = document.querySelector(".menu-list.active");  if (active) active.classList.remove("active");  if (event.target.classList.contains("menu-list")) {    event.target.classList.add("active");  }});在我只添加了 a 标签之前，我在 addEventListener 中定位了 .menu-items 而不是 .menu-list，但是一旦我将 li 标签添加到我的导航栏，li 的类就不起作用了。我不确定要编辑或更改什么

Answer 1

系统的想法是给菜单项一个 id 并使用 id 在这里滚动你忘了给 element 提供 id 。然后我将其放在您的点击事件中，使用此 id 获取该部分的 id 和 href。

items.forEach((item, i) => {

  const el = document.createElement("a");

  el.innerText = item;

  el.classList.add("menu-items");

  el.setAttribute("id", `menu-${i + 1}`);

  el.href = `#section${i + 1}`;

  navList.appendChild(el);

  const li = document.createElement("li");

  li.classList.add("menu-list");

  li.appendChild(el);

  li.setAttribute("id", `${i + 1}`);

  // Append the list item to the list

  navList.appendChild(li);

});

//Make Nav Active when Clicked and scrolls down to section

document.addEventListener("click", function (event) {

  let active = document.querySelector(".menu-list.active");

  if (active) active.classList.remove("active");

  if (event.target.classList.contains("menu-list")) {

    event.target.classList.add("active");

    console.log(event.target.id);

    window.location.href="#section"+event.target.id

  }

});