JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div class="main">
    <div class="slideWrap">
        <div class="slide" id="slide1">
            <p>this is slide 1</p> <a class="slideButton" value="#slide2">
            Go to slide 2</a>

        </div>
        <div class="slide" id="slide2">
            <p>this is slide 2</p> <a class="slideButton" value="#slide3">
            Go to slide 3</a>

        </div>
        <div class="slide" id="slide3">
            <p>this is slide 3</p> <a class="slideButton" value="#slide4">
            Go to slide 4</a>

        </div>
        <div class="slide" id="slide4">
            <p>this is slide 4</p>
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
div {
    margin: 0;
}
.main {
    height: 100%;
    min-height: 100%;
}
.slideWrap {
    height: 400%;
    min-height: 400%;
    position: relative;
}
.slide {
    height: 25%;
    position: relative;
}
#slide1 {
    background: #ddd;
}
#slide2 {
    background: #ccc;
}
#slide3 {
    background: #bbb;
}
#slide4 {
    background: #aaa;
}

JavaScript

$("a.slideButton").click(function(e) {
    var slideId = $(this).attr("value");
    $("html, body").animate({
        scrollTop: $(slideId).offset().top
        }, 2000);
});