JSFiddle - React, Tailwind, and code Playground

HTML

<div class="step1">Step 1 <a href="javascript: goToStep('2')">Step 2</a><br></div>
<div class="step2">Step 2<a href="javascript: goToStep('3')">Step 3</a></div>
<div class="step3">Step 3<a href="javascript: goToStep('4')">Step 4</a></div>
<div class="step4">Step 4</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.step1 {
    display: block;
    width: 100%;
    height: 100%;
    background: pink;
}

.step2 {
    display: block;
    width: 100%;
    height: 100%;
    background: gray;
}

.step3 {
    display: block;
    width: 100%;
    height: 100%;
    background: orange;
}

.step4 {
    display: block;
    width: 100%;
    height: 100%;
    background: purple;
}

JavaScript

window.goToStep = function(step){ 
    $("body").animate({
        scrollTop: $(window).height()*(step-1)
    }, {
        duration: 500,
        complete: function () {
            alert('Test');            
        }
    });
};