Как написать скрипт, чтобы при нажатии на кнопку он скроллил на следующую или предыду

[Tempest]

Как сделать так, чтобы при нажатии на стрелку вверх происходил переход на секцию вверх, а при нажатии на стрелку вниз переход на следующую секцию вниз? Я попробовал написать код для стрелки вверх, но у меня не пролистывается на следующую секцию, а сразу уходит на самый вверх.




Сам сайт http://ct03638.tmweb.ru/

Весь код https://jsfiddle.net/sojq3hm0/

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

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

[рони]

но у меня не пролистывается на следующую секцию,

находим все кнопки, находим текущую, находим следущую, нажимаем, всё!!!

[Tempest]

Да это понятно, но я не понимаю как именно код написать, я только только начал все это изучать

[Tempest]

в документации разберусь, но мне все равно придется писать код для стрелок, а в плагине такого нет

[Tempest]

.fp-arrow-prev,
.fp-arrow-next {
    width: 30px;
    height: 30px;
    margin: 15px 0 15px -3px;
    font-size: 22px;
    color: gray;
    text-align: center;
    cursor: pointer;
    border: 2px solid gray;
    border-radius: 50%;
}

А можешь написать, как это осуществить на стрелках, которые у меня уже есть?