How to make sure that when you click on one of the arrows, you go to the next or previous section?

Question

How to make it so that when you click on one of the arrows, the transition to the section above or the section below occurs? I am not very good at javascript and I am just starting the path of a web developer and therefore I am asking for help. Thanks in advance

Site http://ct03638.tmweb.ru

Code jsfiddle.net/5oukrxtL/

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

Answer 1

The solution is kinda hackish, but it works. Don't forget to add appropriate classes to your arrows arrow next, arrow prev.

$('.arrow').on('click', (e) => {
  e.preventDefault()
  const direction = e.target.parentNode.classList[1]
  const $dotToClick = $('.dot.active').parent()[direction]().find('a').get(0)
  if ($dotToClick) $dotToClick.click()
})

https://jsfiddle.net/a4u3fw6v/2/