JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sur1" class="red block"></div>
<div id="sur2" class="blue block"></div>
<div id="pt1" class="green block hide"></div>
<div id="pt2" class="yellow block hide"></div>

CSS

.block {
    height: 50px;
    width: 50px;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

.green {
    background: green;
}

.yellow {
    background: yellow;
}

.hide {
    display: none;
}

JavaScript

$(function() {
    $("#sur2").on("click", function () {
        $("#pt1").toggleClass("hide");
        $("#pt2").addClass("hide");
        $("html").animate({scrollTop:0}, "slow");
    });
    
    
    $("#sur1").on("click", function () {
        $("#pt2").toggleClass("hide");
        $("#pt1").addClass("hide");
        $("html, body").animate({scrollTop: "5000px" }, "slow");
    });
});