Scroll function to navigate to appropriate section using JavaScript

Question

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

Answer 1

You can use anchor to do this. This will make your life easier than trying to do this in js.

To use it, you just have to set an id to a node. Like <div id="myFirstId"></div> and then, set the href of your link to #myFirstId.

If you want your scroll to not be instant, you can add the scroll-behavior: smooth to the scrollable element.

html {
  scroll-behavior: smooth;
}
#scrollable {
  overflow:auto;
}
#firstDiv {
  background-color: green;
  height: 700px
}
#secondDiv {
  background-color: yellow;
  height: 200px;
}
#thirdDiv {
  background-color: blue;
  height: 500px;
}

<a href="#firstDiv">firstDiv</a>
<a href="#secondDiv">SecondDiv</a>
<a href="#thirdDiv">thirdDiv</a>
<div id="scrollable">
  <div id="firstDiv"></div>
  <div id="secondDiv"></div>
  <div id="thirdDiv"></div>
</div>

For your code, just change this line <a class = "menu__link" data-id=${id}">${name}</a>

To this <a class="menu__link" href="#${id}">${name}</a>