Навбар больше не прокручивает разделы на странице?

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 nav
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);

  // 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");
  }
});

До того, как мне только добавили тег, и я нацелился .menu-items вместо .menu-list в addEventListener, но как только я добавил тег li в свою панель навигации, класс для li не работает. Я не уверен, что редактировать или изменить

Answer 1

Идея системы заключается в том, чтобы дать id для пункта меню и использовать id для прокрутки, здесь вы забыли указать id для элемента. Затем я добавляю его в ваше событие click, чтобы получить идентификатор и ссылку на этот раздел с помощью этого идентификатора.

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
  }
});