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

// 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");
//     // Older browser Support
//     //   const section = document.querySelector(id).getBoundingClientRect();
//     //   window.scrollTo({
//     //   left:section.left + window.pageXOffset,
//     //   top:section.top + window.pageYOffset,
//     //   behavior:"smooth"
//     // })

//     // Modern Broswer Support
//     document.querySelector(id).scrollIntoView({ behavior: "smooth" });
//   }
// });