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

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




Сам сайт 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, так код посмотри у него, лишнее удали, перепиши, если изучать хочешь.

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

И что много кода писать?

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

$('#fp-nav')
    .prepend($('<div class="fp-arrow-prev">&uarr;</div>').on('click', function() { fullpage_api.moveSectionUp() }))
    .append($('<div class="fp-arrow-next">&darr;</div>').on('click', function() { fullpage_api.moveSectionDown() }));

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

Tempest, ну вставь иконку вместо спецсимвола, лол:

<i class="far fa-arrow-alt-circle-up"></i> вместо &uarr;
<i class="far fa-arrow-alt-circle-down"></i> вместо &darr;