JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="randomClass">
<p>start</p>
</div>

<div class=wrapperScroll>
<div class="randomClass">

</div>
<div class="randomClass">

</div>
<div class="scrollStart nextScroll">
<p>scroll to start</p>
</div>

<div class="scrollMid">

</div>
<div class="scrollMid">

</div>
<div class="scrollMid middleClass">
<p>scroll middle</p>
</div>
<div class="scrollMid">

</div>
<div class="scrollMid">

</div>
<div class="randomClass">

</div>
<div class="randomClass">

</div>
<div class="randomClass">
<p>end</p>
</div>

<div class="endClass">
<p>end</p>
</div>
</div>

CSS

.randomClass{
	height: 100px;
	background-color: yellow;
}

.scrollMid{
	height: 200px;
	background-color: white;
}

JavaScript

$( window ).scroll(function() {
	startScroll();
});

function startScroll() {
    $('html, body').animate({
        scrollTop: $(".scrollStart").offset().top
    }, 1000);
	 
	 $(document).on('scroll', function() {
	 console.log($(document).scrollTop());
	 console.log($('.nextScroll').scrollTop());
    if($(document).scrollTop()<=$('.startScroll').position().top){
       // midScroll();
    }
});
}

function midScroll() {
		 $('html, body').animate({
			  scrollTop: $(".endClass").offset().top
		 }, 1000);
}