JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
    <p>1-A</p>
</div>

<div id="b">
    <p>2-B</p>
</div>

<div id="c">
    <p>3-c</p>
</div>
<a class="top" href="javascript:;" rel="a" > /\</a>

CSS

body{
padding: 50px 0 0;
margin: 0;
}
p{
margin: 0;
}
.top{
position: relative;
display:block;
width: 25px;
    float:right;
    margin:0px 20px 20px 0px;
height: 25px;
background: rgba(0,0,0,.2);
    z-index:10;
    text-decoration:none;
    text-align:center;
}

#a{
height: 500px;
    position:relative;
    z-index:1;
}
#b{
height: 600px;
    position:relative;
    z-index:1;
}
#c{
height: 700px;
    position:relative;
    z-index:1;
}

JavaScript

$(document).ready(function(){
    $('.top').on('click', function() {
        $('html,body').animate({'scrollTop':'0px'});
    });
})