Reduce Redundant event listeners and selectors to make navigation scrolling and clicks more concise

Question

Inside of this navigation function, I have a click event that scrolls to sections which are offset by the fixed header height. I also have a scroll event which changes the links' color when the scroll section top is reached. Inside of the click even I am referencing sections using id and element. Inside of the scroll event I am iterating over sections and referencing them using section and section id. I also have two foreach()s which I know is redundant. I have spent two days trying to use one for each and reference the section only once. In short, I simply want to change the link to active when the section is scrolled to or clicked on. I don't want the header to cover the section title when I click on the section which is what happens if I remove the click event.

I tried removing the click event but the header covers the section to title on click.

//  Navigation
function navigation() {
  // Document Variables
  const links = document.querySelectorAll('.scroll-link');
  const sections = document.querySelectorAll('.page-section');
  const header = document.querySelector('.nav-center');

  // Change Link style When Scroll To Section
  let currentSection = 'home';

  window.addEventListener('scroll', () => {
    sections.forEach((section) => {
      let offsetSection = section.offsetTop - section.clientHeight / 4;

      if (window.scrollY >= offsetSection) {
        currentSection = section.id;
      }
    });
    links.forEach((link) => {
      if (link.href.includes(currentSection)) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });

    // Add Arrow When ScrollY is 1300 from top
    const arrow = document.querySelector('.arrow');
    if (window.scrollY > 1300) {
      arrow.classList.add('show-arrow');
    } else {
      arrow.classList.remove('show-arrow');
    }
  });

  // Onclick scroll to section top less fixed header height
  links.forEach((link) => {
    link.addEventListener('click', (e) => {
      e.preventDefault();

      const id = e.target.getAttribute('href').slice(1);
      const element = document.getElementById(id);
      let headerHeight = header.getBoundingClientRect().height;
      let position = element.offsetTop - headerHeight;

      window.scrollTo({
        left: 0,
        top: position,
        behavior: 'smooth',
      });
    });
  });
}
navigation();
// CAROUSEL

function imageCarousel() {
  const slides = document.querySelectorAll('.slide');

  // position slides 0, 100, 200, 300 etc to left
  slides.forEach((slide, index) => {
    slide.style.left = `${index * 100}%`;
  });

  let counter = 0;

  const carousel = () => {
    if (counter > slides.length - 1) {
      counter = 0;
    }
    // moves slides to the right
    slides.forEach((slide, index) => {
      slide.style.transform = `translateX(-${counter * 100}%)`;
    });

    // dots
    const dots = document.querySelectorAll('.dot');

    dots.forEach((dot, index) => {
      if (counter === index) {
        dot.style.backgroundColor = 'red';
      } else {
        dot.style.backgroundColor = 'transparent';
      }
    });
  };

  setInterval(() => {
    counter++;
    carousel();
  }, 2000);
}
imageCarousel();

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

.nav-center {
  background-color: black;
  color: white;
  text-align: center;
  font-size: 1.2rem;
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 5000;
}

html {
  scroll-behavior: smooth;
}

.nav-links {
  display: flex;
  justify-content: space-evenly;
}

.nav-links a {
  color: white;
}
.nav-links a:hover {
  color: yellow;
}
.nav-links a.active {
  color: red;
}

.hero {
  width: 100%;
  height: 500px;
  position: relative;
  margin-top: 15px;
}

.hero h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: white;
  font-size: 3rem;
}

.slide-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: black;
  overflow: hidden;
}

.slide-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2000;
  background-attachment: fixed;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slide1 {
  background: url('slide1.jpg') no-repeat center/cover;
}
.slide2 {
  background: url('slide2.jpg') no-repeat center/cover;
}
.slide3 {
  background: url('slide3.jpg') no-repeat center/cover;
}
.slide4 {
  background: url('slide4.jpg') no-repeat center/cover;
}
.slide5 {
  background: url('slide5.jpg') no-repeat center/cover;
}

.dots-container {
  position: absolute;
  width: 25%;
  top: 85%;
  left: 50%;
  display: flex;
  gap: 1rem;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 100px;
  border: 2px solid black;
}

main .page-section {
  width: 80%;
  margin: 4rem auto;
}

main .page-section h2 {
  text-align: center;
  margin-bottom: 1rem;
}

main p {
  line-height: 1.5;
}

.services {
  background-color: aquamarine;
}
.about {
  background-color: lightcoral;
}
.contact {
  background-color: lightslategray;
}

.arrow {
  font-size: 3rem;
  color: black;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  animation: bounce 1s ease infinite;
  visibility: hidden;
}
@keyframes bounce {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}

.show-arrow {
  visibility: visible;
  z-index: 2000;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/ab53afcc49.js"
      crossorigin="anonymous"
    ></script>
    <title>Document</title>
  </head>
  <body>
    <header id="home" class="page-section">
      <h1>Bounding Client</h1>
      <nav class="nav-center">
        <ul class="nav-links">
          <li><a href="#home" class="scroll-link active">Home</a></li>
          <li><a href="#services" class="scroll-link">Services</a></li>
          <li><a href="#about" class="scroll-link">About</a></li>
          <li><a href="#contact" class="scroll-link">Contact</a></li>
        </ul>
      </nav>
      <section class="hero">
        <h2>Scroll & BoundingClientRECT</h2>
        <div class="slide-container">
          <div class="slide slide1"></div>
          <div class="slide slide2"></div>
          <div class="slide slide3"></div>
          <div class="slide slide4"></div>
          <div class="slide slide5"></div>
        </div>
        <div class="dots-container">
          <div class="dot dot1"></div>
          <div class="dot dot2"></div>
          <div class="dot dot3"></div>
          <div class="dot dot4"></div>
          <div class="dot dot5"></div>
        </div>
      </section>
    </header>

    <main>
      <section class="services page-section" id="services">
        <h2>Services</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam placeat
          explicabo cumque! Iure earum rerum nam magnam, consequuntur enim ipsa
          quibusdam accusantium, sapiente rem, ducimus assumenda ipsam similique
          omnis atque sunt placeat quidem voluptatibus. Sed hic sint explicabo
          architecto reiciendis iste nesciunt ut dicta quas itaque, laborum
          pariatur nemo repellendus ullam, vel assumenda consequuntur
          temporibus? Porro mollitia quibusdam labore dignissimos? Officia sunt
          deserunt in fugit labore quisquam vitae magni iure! Deserunt
          laudantium minus, illo voluptatem odit hic suscipit quia, perferendis
          dolorem nulla nisi obcaecati! Quibusdam totam voluptate dolorum eaque
          facere, dolore explicabo ratione itaque, facilis excepturi commodi
          voluptatum, officiis quos voluptas dicta! Optio minus recusandae sunt
          impedit numquam hic quos voluptatibus aliquam rem sit error dolorum
          veniam sint iure, cupiditate assumenda et quis, excepturi ut ipsum
          quod exercitationem ducimus! Ullam, esse quibusdam! Laborum veniam vel
          dicta amet excepturi ex eos quos, voluptatem dolorum velit corrupti
          nulla, assumenda, quis repellat non dignissimos enim voluptatibus
          veritatis illum tempora illo neque! Quia doloremque quos nemo deserunt
          voluptatibus, eligendi animi, quo facilis ipsa illo voluptate eveniet.
          Alias expedita natus ducimus sequi, vitae recusandae quisquam. Dolores
          rem, cum velit voluptatem, sunt perferendis iste veritatis nihil
          dignissimos nobis dolorem quia inventore. Recusandae tempore porro
          dolorem laboriosam!
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur,
          sapiente illum. Incidunt minima fuga sed ullam doloribus suscipit
          voluptate iure dignissimos facere, quidem cum veritatis necessitatibus
          reprehenderit in. Modi vitae rerum harum sunt enim assumenda iusto
          quas consectetur dicta numquam. Quae ratione at tempora, cum
          repudiandae quis molestias temporibus laudantium nisi sint est iste
          culpa unde harum, eveniet quo recusandae libero voluptatibus? Beatae
          eos sapiente exercitationem omnis porro est aut distinctio atque
          laboriosam similique, ex suscipit inventore voluptas et eveniet unde
          tempora deleniti architecto, odit reiciendis sunt? Suscipit distinctio
          recusandae iste officia, nobis architecto quod quisquam corrupti ut
          aliquam, magnam odio pariatur unde corporis sunt molestiae
          necessitatibus ea molestias provident nesciunt quam, veritatis tenetur
          enim! Voluptate, non ipsam similique perspiciatis officia autem, porro
          facilis officiis dolorum corrupti voluptatum aut cum aspernatur!
          Molestiae dolore, ipsam rerum provident unde aperiam quaerat nam aut
          impedit ullam? Neque sapiente velit corporis ex minus harum tempora
          sed saepe similique eligendi accusamus dignissimos iure doloremque,
          fugit dolorem unde necessitatibus perspiciatis! Dignissimos cupiditate
          fugit repellat, deleniti numquam aliquid aliquam magni dolores ab
          suscipit perferendis autem asperiores quod minima, laborum dolorum
          reprehenderit accusantium cumque possimus unde deserunt. Ex optio
          adipisci sequi numquam totam nemo at earum itaque rem, et facilis
          quam, in voluptatum voluptatem. Eaque magni reprehenderit, ut
          blanditiis quasi, tempora quo alias, unde illum maxime aperiam tempore
          voluptatibus soluta delectus? Sint amet debitis facilis reprehenderit
          eos sequi quos vitae nobis quo. Ad aliquid animi adipisci earum
          exercitationem id nihil voluptates, beatae tempore molestias deserunt.
          Vel blanditiis praesentium ratione maiores facere et veniam omnis iure
          ea enim temporibus quis eius aut, harum nam, quas hic provident,
          accusamus nulla! Beatae ut, maxime labore sequi quibusdam nisi cumque
          nesciunt ullam quia temporibus expedita dolorem enim, architecto
          minima ducimus illum ipsum fugiat incidunt cum omnis! Cupiditate nisi,
          nobis dolores corrupti sit eligendi pariatur ipsam ab, atque illo
          doloremque repellat ipsum voluptatum officia ducimus commodi sed?
          Minus necessitatibus rem obcaecati itaque, voluptatem esse a quaerat
          iste, perferendis commodi at praesentium possimus aut ea aliquam
          quidem beatae sequi nobis quos. Quae nam blanditiis saepe voluptatum!
          Id quibusdam, architecto aspernatur minus saepe doloremque cumque
          adipisci ipsum accusantium nobis cum officiis omnis minima, quasi
          eius, nisi officia ad quod asperiores suscipit rerum illo? Temporibus
          itaque magni quis doloremque voluptas ad, ab iste sequi, at aut sed
          ipsam fuga ipsa et officia atque odio. Explicabo consequatur
          laboriosam ullam vero exercitationem recusandae eius, iusto qui,
          temporibus quaerat natus ducimus velit totam. Porro expedita
          laudantium explicabo voluptas blanditiis quasi amet doloribus quam,
          deleniti fugit ipsa possimus repudiandae consequuntur sunt corrupti
          earum voluptate! Cum quibusdam impedit eaque ad officiis a nobis
          voluptatum explicabo recusandae, eum temporibus quae id dicta quidem
          rem cupiditate eius. Dolor obcaecati harum cupiditate impedit
          perspiciatis non libero maiores expedita? Neque nulla odit tenetur!
          Obcaecati reprehenderit ad, dignissimos dolor quia iste dolorum
          repudiandae officiis praesentium, quisquam accusantium veniam eveniet
          quasi est deserunt in eum possimus sapiente architecto consequuntur
          porro aliquid placeat quae libero. Doloremque consequuntur harum
          voluptate nemo! Velit corrupti eligendi sed eos obcaecati. Totam, ea.
        </p>
      </section>
      <section class="about page-section" id="about">
        <h2>About</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam placeat
          explicabo cumque! Iure earum rerum nam magnam, consequuntur enim ipsa
          quibusdam accusantium, sapiente rem, ducimus assumenda ipsam similique
          omnis atque sunt placeat quidem voluptatibus. Sed hic sint explicabo
          architecto reiciendis iste nesciunt ut dicta quas itaque, laborum
          pariatur nemo repellendus ullam, vel assumenda consequuntur
          temporibus? Porro mollitia quibusdam labore dignissimos? Officia sunt
          deserunt in fugit labore quisquam vitae magni iure! Deserunt
          laudantium minus, illo voluptatem odit hic suscipit quia, perferendis
          dolorem nulla nisi obcaecati! Quibusdam totam voluptate dolorum eaque
          facere, dolore explicabo ratione itaque, facilis excepturi commodi
          voluptatum, officiis quos voluptas dicta! Optio minus recusandae sunt
          impedit numquam hic quos voluptatibus aliquam rem sit error dolorum
          veniam sint iure, cupiditate assumenda et quis, excepturi ut ipsum
          quod exercitationem ducimus! Ullam, esse quibusdam! Laborum veniam vel
          dicta amet excepturi ex eos quos, voluptatem dolorum velit corrupti
          nulla, assumenda, quis repellat non dignissimos enim voluptatibus
          veritatis illum tempora illo neque! Quia doloremque quos nemo deserunt
          voluptatibus, eligendi animi, quo facilis ipsa illo voluptate eveniet.
          Alias expedita natus ducimus sequi, vitae recusandae quisquam. Dolores
          rem, cum velit voluptatem, sunt perferendis iste veritatis nihil
          dignissimos nobis dolorem quia inventore. Recusandae tempore porro
          dolorem laboriosam!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          inventore assumenda culpa ea porro ipsam consequatur, non error et
          facere quia nihil doloremque dolor tempore vero natus saepe
          exercitationem aliquid pariatur nemo itaque praesentium voluptate? Cum
          labore officiis tempore ab accusamus enim, iste quod, quaerat a
          aperiam quas, delectus deleniti optio rem totam suscipit! Tempore iure
          autem accusantium alias eligendi laboriosam architecto sed. Eveniet
          eligendi, vel sint ipsa id iste consequatur. Corrupti sed ipsa, ipsum
          eveniet vel voluptatum labore aliquam consequuntur accusantium
          exercitationem architecto harum asperiores sint id, voluptate dolorum
          consectetur voluptas odio praesentium similique qui molestiae. Beatae
          voluptatum placeat omnis aut debitis exercitationem recusandae id,
          incidunt veritatis obcaecati hic eius perferendis inventore rerum
          dolorem quod velit asperiores corrupti odit officiis repellendus
          facere autem. Odio amet quasi, saepe nulla incidunt voluptas qui eum
          dicta modi dolor ut deleniti. Veritatis impedit animi alias maiores
          aspernatur, itaque debitis perferendis repellat qui consequatur,
          corrupti quis enim optio accusamus veniam consequuntur laborum ullam
          libero molestiae architecto odit! Nisi consequatur itaque eaque
          reprehenderit deleniti? Magnam nihil suscipit saepe at perspiciatis
          unde animi veniam ipsa autem quidem. Nemo, eligendi. Minus aut, modi
          harum sapiente omnis est quo, quasi adipisci, vel excepturi nisi
          veniam magni. Nemo laudantium natus quibusdam sit blanditiis
          reiciendis laboriosam quia voluptatum? Omnis illo ducimus tenetur
          ullam ipsam dolores architecto? Ea dolore error impedit. Quos aperiam
          aliquam cum autem exercitationem rem optio odit sed quas vero, vitae
          eos neque ad temporibus delectus illo. Soluta ab doloribus dolores
          ratione quod perspiciatis veniam voluptatum ad libero consectetur
          distinctio qui suscipit nulla, sint odio et pariatur id officiis
          voluptatem vero. Perferendis ut reprehenderit doloribus? Minima
          dolores placeat unde quo ipsa doloremque! Optio commodi eveniet saepe
          nisi, reiciendis est provident magnam debitis eius expedita eligendi
          quas doloremque beatae quia tempora. Recusandae maxime eos sunt quo,
          cumque adipisci magnam vitae fugiat. Eos labore, modi explicabo quia
          necessitatibus beatae. Deserunt quia quidem saepe, distinctio at
          eveniet! Iure dolor facilis pariatur cupiditate facere. Harum ex,
          accusantium beatae hic, perferendis ut quae voluptatem pariatur quo
          tempora provident voluptatibus numquam blanditiis assumenda nisi
          laboriosam corporis dolore. Fuga ratione ea consectetur, quia totam
          expedita quod deserunt, minus impedit quo necessitatibus eaque animi
          ex maxime adipisci voluptas rerum qui. Asperiores corrupti rerum sunt
          sint dolore neque consequatur, unde quis eos, quibusdam perspiciatis
          deserunt sit rem placeat voluptates dolores sequi incidunt! Quibusdam
          accusamus commodi molestiae, iure distinctio modi vel. Illo mollitia
          perspiciatis ea, beatae pariatur alias dicta accusamus nostrum iste
          tempora saepe dolorem rem quos rerum consequatur quasi aperiam
          asperiores? Minus officia iusto praesentium, ullam aspernatur id non
          illo fugit eos accusamus consequatur corporis libero eligendi unde
          vero. Suscipit nam omnis, beatae similique, vero et quam, sunt officia
          mollitia ullam consectetur tempora odit nemo? Laudantium modi ipsam
          quae harum molestias, voluptatibus eaque quod aspernatur odit sed
          labore reprehenderit quam doloribus. Ullam minima eius, temporibus
          odit animi voluptate beatae praesentium tempore modi, nulla soluta,
          dolor quia accusamus amet doloribus ipsam! Sed, cum necessitatibus.
          Quibusdam quod amet minima modi ducimus commodi repudiandae quidem,
          quis neque quia, doloremque ad!
        </p>
      </section>
      <section class="contact page-section" id="contact">
        <h2>Contact</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam placeat
          explicabo cumque! Iure earum rerum nam magnam, consequuntur enim ipsa
          quibusdam accusantium, sapiente rem, ducimus assumenda ipsam similique
          omnis atque sunt placeat quidem voluptatibus. Sed hic sint explicabo
          architecto reiciendis iste nesciunt ut dicta quas itaque, laborum
          pariatur nemo repellendus ullam, vel assumenda consequuntur
          temporibus? Porro mollitia quibusdam labore dignissimos? Officia sunt
          deserunt in fugit labore quisquam vitae magni iure! Deserunt
          laudantium minus, illo voluptatem odit hic suscipit quia, perferendis
          dolorem nulla nisi obcaecati! Quibusdam totam voluptate dolorum eaque
          facere, dolore explicabo ratione itaque, facilis excepturi commodi
          voluptatum, officiis quos voluptas dicta! Optio minus recusandae sunt
          impedit numquam hic quos voluptatibus aliquam rem sit error dolorum
          veniam sint iure, cupiditate assumenda et quis, excepturi ut ipsum
          quod exercitationem ducimus! Ullam, esse quibusdam! Laborum veniam vel
          dicta amet excepturi ex eos quos, voluptatem dolorum velit corrupti
          nulla, assumenda, quis repellat non dignissimos enim voluptatibus
          veritatis illum tempora illo neque! Quia doloremque quos nemo deserunt
          voluptatibus, eligendi animi, quo facilis ipsa illo voluptate eveniet.
          Alias expedita natus ducimus sequi, vitae recusandae quisquam. Dolores
          rem, cum velit voluptatem, sunt perferendis iste veritatis nihil
          dignissimos nobis dolorem quia inventore. Recusandae tempore porro
          dolorem laboriosam!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem
          voluptates, impedit odit repellat similique temporibus officia
          dignissimos, enim eligendi pariatur inventore itaque ea debitis!
          Excepturi quia deleniti, corrupti numquam animi laborum ipsam natus?
          Beatae neque, magni expedita enim commodi doloremque libero,
          reiciendis ut assumenda, excepturi eaque nisi ex maxime hic.
          Blanditiis tenetur sint voluptatum, exercitationem quasi similique
          quibusdam dignissimos quam doloremque, earum ullam nemo voluptate
          magnam odit eius officia consectetur optio mollitia? Voluptate modi
          ducimus alias magni in. Quibusdam quod vero dicta culpa quo debitis,
          ipsam nisi minima adipisci nostrum assumenda asperiores voluptatem in
          inventore nemo. Doloribus repudiandae rem perferendis nesciunt debitis
          quas corporis sit a quasi sed porro nulla hic, cupiditate quo maxime
          officia esse sint eius molestias aut? Repellendus molestiae incidunt
          accusamus atque voluptatibus omnis praesentium? Perspiciatis ad iure
          ab, laudantium commodi laboriosam possimus quidem quaerat quibusdam
          harum nihil ut ipsam nostrum esse temporibus! Quaerat suscipit ad
          dolorum, itaque delectus in similique dolore recusandae beatae natus
          dolorem obcaecati fugit doloremque non accusamus, explicabo
          repudiandae dignissimos sapiente corrupti mollitia molestias tempora
          totam officia eos. Labore, tenetur saepe! Ipsum dicta reiciendis,
          omnis veritatis necessitatibus fugit saepe deleniti voluptas molestias
          asperiores magnam, commodi harum soluta atque eaque nesciunt!
          Assumenda quia accusamus nihil fugiat praesentium corporis, et eum
          quis asperiores blanditiis dicta odio incidunt beatae nam? Sed, ipsam
          magni ea autem quos, minus rerum eveniet nobis eos reiciendis possimus
          quia quas tenetur eligendi laudantium numquam ullam similique illum
          accusantium explicabo. Iusto quos tempora omnis, vero quibusdam
          sapiente reiciendis accusamus itaque eos deserunt et optio ipsam,
          quidem autem in repellendus voluptas temporibus nihil ratione.
          Quibusdam dolorem omnis, laboriosam aliquam nobis nam enim mollitia,
          eveniet, nisi id atque. Nisi aperiam ad eum dolorem architecto
          mollitia vero veniam. Quam, error fugiat! Illum magni asperiores
          placeat aspernatur doloremque distinctio nihil enim. Dolore numquam
          dicta in quas unde sit sunt iure illum ex enim provident facere,
          consequuntur placeat eum nemo quia dolorum alias minima dignissimos?
          Sed incidunt neque totam delectus similique repellat! Quas cupiditate
          accusantium ea in amet, saepe excepturi sunt ab similique rem itaque
          voluptate et quisquam deleniti! Ad, illum! Facere, sapiente iure amet
          harum praesentium numquam voluptatem minus. Blanditiis dicta
          praesentium repellat et nihil culpa repudiandae, debitis
          exercitationem ad voluptates, fugiat amet consequatur aut. Amet, ea
          maxime impedit aut, animi labore quaerat excepturi dolorem corrupti ad
          iure, deserunt modi dignissimos mollitia. Obcaecati consectetur in
          necessitatibus iusto suscipit enim maxime? Illo enim autem, temporibus
          aliquid rerum, tenetur dolorum eveniet rem, mollitia recusandae totam
          provident magni! Quisquam vero veniam nemo expedita mollitia illum
          veritatis exercitationem omnis incidunt eaque architecto nihil est
          similique nisi voluptates, optio earum! Ad praesentium numquam
          temporibus quod iste, commodi corporis odio quaerat facilis porro
          repellat, deserunt aut vel hic necessitatibus voluptatem? Vero id unde
          aperiam eum ullam maxime impedit, blanditiis totam eaque fugiat
          voluptatem temporibus voluptate ad ducimus error iure perferendis
          commodi magnam quia odit ex harum sed? Iusto alias culpa cupiditate,
          tempore officiis illo minus aliquid nobis nihil molestiae eveniet
          dicta perferendis quos corrupti pariatur! Ipsum odio repellat
          recusandae iste adipisci dolorem.
        </p>
      </section>
    </main>

    <a href="#home" class="scroll-link arrow"
      ><i class="fa-solid fa-circle-arrow-up"></i
    ></a>

    <footer><p>Lorem, ipsum.</p></footer>

    <script src="app.js"></script>
  </body>
</html>

Answer 1

I think you can solve most of your issues with CSS only.

• The scrollTo behaviour can be created with CSS. Just create normal links that point to your sections, and set window scrolling to smooth : scroll-behavior: smooth.
• Creating conventional links instead of javascript links is also better for search engines to understand your page, and for screen readers, used by people with reduced eyesight.
• The extra space that you need for the navbar can be created with CSS, you can use padding or margin to add some space above the sections.
• The last requirement is a bit more tricky: highlighting the part that the user scrolled to. This should also work when the user doesn't click the navbar at all. I can think of two solutions:
  • Using IntersectionObserver in javascript to see which section is currently visible.
  • Or using the new CSS animation-timeline: scroll() to respond to scrolling without javascript.