JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section">
    <div class="fullscreen"> <span>
        <div class="section-down-arrow-wrap scroller">CLICK</div>
    </span>

    </div>
    <div class="fullscreen">
        <div class="half-screen">
            <div class="section-down-arrow-wrap scroller">CLICK</div>
        </div>
    </div>
    <div class="fullscreen"> <span>
        <div class="section-down-arrow-wrap scroller">CLICK</div>
    </span>

    </div>
    <div class="fullscreen">
        <div class="half-screen">
            <div class="section-down-arrow-wrap scroller">CLICK</div>
        </div>
    </div>
</div>

CSS

.section {
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left: 0;
    overflow: scroll;
}

.fullscreen {
    position: relative;
    width: 100%;
    height: 400px;
    background: orange;
}
.fullscreen:nth-child(even) {
    background: blue;
}
.section-down-arrow-wrap {
    cursor: pointer;
}

JavaScript

$(document).ready(function () {

    $('.section-down-arrow-wrap.scroller').on('click', function () {

        var fuller = $(this).closest('.fullscreen').next('.fullscreen'),
            section = $(this).closest('.section');

        section.animate({
            scrollTop: fuller.offset().top + 200
        }, 700);

    });

});