<header>
  <ul class="nav">
    <li><a class="nav_link" href="#section1">Section 1</a></li>
    <li><a class="nav_link" href="#section2">Section 2</a></li>
    <li><a class="nav_link" href="#section3">Section 3</a></li>
    <li><a class="nav_link" href="#section4">Section 4</a></li>
    <li><a class="nav_link" href="#section5">Section 5</a></li>
  </ul>
</header>

<main>
  <section id="section1">This is Section 1</section>
  <section id="section2">This is Section 2</section>
  <section id="section3">This is Section 3</section>
  <section id="section4">This is Section 4</section>
  <section id="section5">This is Section 5</section>
</main>

*{
  margin:0;
  paddin:0;
  box-sizing:border-box;
  scroll-behavior: smooth;
}
ul{
  list-style:none;
}
a {
  text-decoration:none;
}

.nav{
  position:fixed;
  top:0;
  min-width:100%;
  padding:10px;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  background-color:rebeccapurple;
}
.nav_link {
  color:white;
}

section{
  height:100vh;
  display:grid;
  place-items:center;
  font-size:2rem;
}
#section1{
  background:crimson;
  color:white;
}
#section2{
  background:violet;
}
#section3{
  background:lime;
}
#section4{
  background:cyan;
}
#section5{
  background:rgb(0,0,0,0.8);
  color:white;
}

  window.scrollTo({
  left:section.left + window.pageXOffset,
  top:section.top + window.pageYOffset,
  behavior:"smooth"
})

* Using event target, checking if the link which is clicked has a class name "nav_link", if it does, then get the href attribute value of that link.
* By passing this href attribute value as id in the querySelector(), we will get the section which is connected to this link ( Example - href="#section1" in anchor tag and id="section1" in section tag), querySelector will recieve the id directly like querySelector("#section1")
* What it is doing, is just calculating the top and left value of the section using getBoundingClientRect() method and bahavior:smooth will make the scrolling smooth. There is better method of doing this so, you can just not go in depth for this one.

* Modern Way
```js


const navbar = document.querySelector(".nav");

navbar.addEventListener("click", (e) => {
  e.preventDefault();
  const target = e.target;
  if (target.classList.contains("nav_link")) {
    const id = e.target.getAttribute("href");
    document.querySelector(id).scrollIntoView({ behavior: "smooth" });
  }
});