JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div style="height:2000px; float:left; width:100%;">
    Text text Text text Text text Text text Text text Text text Text text Text text Text textv Text text Text text Text text Text textText text



</div>

<div class="start">
    START
</div>
<div class="stop">
    STOP
</div>

JavaScript

//run instantly and then goes after (setTimeout interval)
function autoScroll() {

    $("html, body").animate({
        scrollTop: $(document).height()
    }, 4000);
    setTimeout(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 4000);
    }, 4000);
    setInterval(function() {
        // 4000 - it will take 4 secound in total from the top of the page to the bottom
        $("html, body").animate({
            scrollTop: $(document).height()
        }, 4000);
        setTimeout(function() {
            $('html, body').animate({
                scrollTop: 0
            }, 4000);
        }, 4000);

    }, 8000);

}

autoScroll();