如何使用javascript创建导航菜单li？以及如何在单击菜单选项后平滑地滚动到部分？

Question

我正在尝试创建一个导航菜单与4个选项只使用Javascript。我试图将它插入到id为"navbar__list“的'ul‘中，并希望通过JS创建具有类和id的li。这就是我到目前为止所做的，但我知道我的代码似乎是重复的，我不确定如何让它更简洁。

const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");

//Attempt to build the Nav Menu
const navItem1 = document.createElement("a");
navItem1.classList.add("menu-items");
navItem1.setAttribute("id", "menu-1");
navItem1.innerText = "Section 1";
navItem1.href = "#section1";
navList.appendChild(navItem1);

const navItem2 = document.createElement("a");
navItem2.classList.add("menu-items");
navItem2.setAttribute("id", "menu-2");
navItem2.innerText = "Section 2";
navItem2.href = "#section2";
navList.appendChild(navItem2);

const navItem3 = document.createElement("a");
navItem3.classList.add("menu-items");
navItem3.setAttribute("id", "menu-3");
navItem3.innerText = "Section 3";
navItem3.href = "#section3";
navList.appendChild(navItem3);

const navItem4 = document.createElement("a");
navItem4.classList.add("menu-items");
navItem4.setAttribute("id", "menu-4");
navItem4.innerText = "Section 4";
navItem4.href = "#section4";
navList.appendChild(navItem4);

我还想创建一个滚动效果，这样每当我单击菜单选项时，它就会平滑地滚动到我的HTML中的部分。每个部分都被标记为Section1 - Section4。

Answer 1

首先，您可以使用以下代码而不是重复代码，它可以完成相同的任务

const navList = document.getElementById("navbar__list");

for(let i=1; i<5; i++){
    const navItem = document.createElement("a");
    navItem.classList.add("menu-items");
    navItem.setAttribute("id", `menu-${i}`);
    navItem.innerText = `Section ${i}`;
    navItem.href = `#menu-${i}`;
    navList.appendChild(navItem);
}

我相信这将解决第一个问题。

其次，为了流畅地滚动。在你的css臀部

html,body{
   scroll-behavior: smooth;
}

有关平滑滚动的更多信息，请查看此https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

Answer 2

上面的方法是非常正确的，但我使用了一种不同的方法来实现这一点。

我使用数组来存储菜单项，然后使用forEach循环遍历数组来创建锚元素并将它们添加到ul列表中。

const navMenu = document.querySelectorAll("header");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];

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

查看代码链接，看看：https://codepen.io/burhanmm/pen/vYOqQdb