My goal is to complete a dynamic single landing page using JavaScript. HTML and CSS files were already provided and I managed to build an unordered list by manipulating the DOM.

The thing that got me stuck is: When clicking an item from the navigation menu, the link should scroll to the appropriate section. I cannot get this to work :/

Below is the JS code so far.

/* Declare variables for the fictive document and menu list to retrieve and store variables as unordered list */
const container = document.createDocumentFragment();
const menuList = document.getElementsByTagName('section');

/* Function to create the navigation menu as a clickable link */
function navigationLink(id, name) {
    const navLink = `<a class = "menu__link" data-id=${id}">${name}</a>`;
    return navLink;
}

/* Function for the navigation list, built as an unordered list */
function createNavigation() {
    for (let i = 0; i < menuList.length; i++) {
        const newMenuListItem = document.createElement('li');
        const menuListName = menuList[i].getAttribute('data-nav')
        const menuListID = menuList[i].getAttribute('id')
        newMenuListItem.innerHTML = navigationLink(menuListID, menuListName)
        container.appendChild(newMenuListItem);
    }
    /* Retrieve the id from the ul section to be added to the document fragment: container */
    const navBarMenu = document.getElementById('navbar__list')
    navBarMenu.appendChild(container);
}

// Add class 'active' to section when near the top of viewport
function setActiveClass() {
    for (let i = 0; i < menuList.length; i++) {
        if (isInViewport(menuList[i])) {
            menuList[i].classList.add("your-active-class");
        } else {
            menuList[i].classList.remove("your-active-class");
        }
    }
}

To solve the problem I looked into another piece of code that I haven't been able to function properly.

function scrollToElement(event) {
    if (event.target.nodeName === 'A') {
        const menuListID = event.target.getAttribute('data-id');
        const menu = document.getElementById(menuListID);
        menu.scrollIntoView({ behavior: "smooth" });
    }
}
document.addEventListener('scroll', function () {
    setActiveClass();
});

const navBarMenu = document.getElementById('navbar__list')
navBarMenu.addEventListener('click', function (event) {
    scrollToElement(event)
})