Scrolling in blocks with your finger

Question

Good morning,

I’m mounting a one page with 5 blocks, where each block is sized to have the screen height. The goal is for each block to appear whole on a cell phone screen.

I put a link in each block that when the user clicks, automatically scrolls to the next block.

But it needed to have this same functionality in manual scrolling. That is... If the user is viewing block 1 and dragging his finger up, the screen should automatically scroll to the beginning of block 2 and stop, as well as the link he has in block 1.

HTML code

<section id="bloco1" class="bloco bloco1">
    <div class="logo">
        <img src="common/default/images/logo-fundo.png">
        <h2>Você merece ser feliz!</h2>
        <div class="rodape-bloco">
            <h3>Gazebos</h3>
            <div id="arraste-bloco1">
                Arraste para cima e saiba mais...<br>
                <img src="common/default/images/seta-cima.png">
            </div>
        </div>
    </div>

</section>
<section id="bloco2" class="bloco bloco2">
    <div class="logo">
        <img src="common/default/images/logo-fundo.png">
        <h2>Lazer para toda família</h2>
        <div class="rodape-bloco">
            <h3>Minigolfe</h3>
            <div id="arraste-bloco2">
                Arraste para cima e saiba mais...<br>
                <img src="common/default/images/seta-cima.png">
            </div>
        </div>
    </div>
</section>
<section id="bloco3" class="bloco bloco3">
    <div class="logo">
        <img src="common/default/images/logo-fundo.png">
        <h2>Dias mais lúdicos</h2>
        <div class="rodape-bloco">
            <h3>Brinquedoteca</h3>
            <div id="arraste-bloco3">
                Arraste para cima e saiba mais...<br>
                <img src="common/default/images/seta-cima.png">
            </div>
        </div>
    </div>
</section>
<section id="bloco4" class="bloco bloco4">
    <div class="logo">
        <img src="common/default/images/logo-fundo.png">
        <h2>Muita segurança</h2>
        <div class="rodape-bloco">
            <h3>Portaria 24h</h3>
            <div id="arraste-bloco4">
                Arraste para cima e saiba mais...<br>
                <img src="common/default/images/seta-cima.png">
            </div>
        </div>
    </div>
</section>
<section id="bloco5" class="bloco bloco5">
    <div class="logo">
        <img src="common/default/images/logo-fundo.png">
        <h2>e muito mais!</h2>
        <div class="rodape-bloco">
            <h3>Informe seu nome, e-mail e telefone e receba um book digital completo.</h3>
            <div id="arraste-bloco2">
                Arraste para cima e saiba mais...<br>
                <img src="common/default/images/seta-cima.png">
            </div>
        </div>
    </div>
</section>

JS Code

$("#arraste-bloco1").on('click', function() {
   $('html, body').animate({scrollTop: $("#bloco2").offset().top}, 300);
});

$("#arraste-bloco2").on('click', function() {
   $('html, body').animate({scrollTop: $("#bloco3").offset().top}, 300);
});

$("#arraste-bloco3").on('click', function() {
   $('html, body').animate({scrollTop: $("#bloco4").offset().top}, 300);
});

$("#arraste-bloco4").on('click', function() {
   $('html, body').animate({scrollTop: $("#bloco5").offset().top}, 300);
});

I need to perform the same actions when the user drags his finger from one block to the other, but I have no idea how to do this. Can someone help, please?

Grateful