How to write a script so that when you click on a button, it flips to the next or previous page?

Question

How to make it so that when you click on the up arrow, you go to the section above, and when you click on the down arrow, you go to the next section down? I tried to write the code for the up arrow, but it doesn't scroll to the next section, but immediately goes to the very top

enter image description here

Site http://ct03638.tmweb.ru/

Code https://jsfiddle.net/eu0jgf2x/

$(".fa-arrow-alt-circle-up").click(function(e) {
  e.preventDefault();
  $('html,body').animate({ scrollTop: 0 }, 'slow');
});

<nav class="navbar">
  <ul>
    <li>
      <a href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
    </li>
    <li>
      <a href="#main" class="dot active" data-scroll="main">
        <span>Главная</span>
      </a>
    </li>
    <li>
      <a href="#about_us" class="dot" data-scroll="about_us">
        <span>О нас</span>
      </a>
    </li>
    <li>
      <a href="#services" class="dot" data-scroll="services">
        <span>Услуги</span>
      </a>
    </li>
    <li>
      <a href="#sequence" class="dot" data-scroll="sequence">
        <span>Порядок работы</span>
      </a>
    </li>
    <li>
      <a href="#stages" class="dot" data-scroll="stages">
        <span>Этапы работы</span>
      </a>
    </li>
    <li>
      <a href="#portfolio" class="dot" data-scroll="portfolio">
        <span>Портфолио</span>
      </a>
    </li>
    <li>
      <a href="#news" class="dot" data-scroll="news">
        <span>Новости</span>
      </a>
    </li>
    <li>
      <a href="#contacts" class="dot" data-scroll="contacts">
        <span>Контакты</span>
      </a>
    </li>
    <li>
      <a href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
    </li>
  </ul>
</nav>

enter image description here