JSFiddle - React, Tailwind, and code Playground

HTML

<div id="anchors">
	<a href="#p0">0</a>
	<a href="#p1">1</a>
	<a href="#p2">2</a>
	<a href="#p3">3</a>
</div>
<div class="targets" id="p0"></div>
<div class="targets" id="p1"></div>
<div class="targets" id="p2"></div>
<div class="targets" id="p3"></div>
<div id="pages">
	<div>0</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

CSS

/*スクロールバーを殺す*/
html,body{
	overflow: hidden;
}
/*ページ移動のためのリンク*/
#anchors{
	position: fixed;
	z-index: 1;
	bottom: 0;
	left: 0;
	background-color: yellow;
}
/*ハッシュによるtarget擬似クラスを有効化するためのダミーノード*/
.targets{
	display: none;
}
/*ページコンテナ(この位置をアニメーション化することでスクロールを表現する)*/
#pages{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: visible;
	transition: top 1s ease 0s;
}
/*ページの設定*/
#pages>div{
	width: 100%;
	height: 100%;
}
#pages>div:nth-child(even){background-color: yellow;}
#pages>div:nth-child(odd){background-color: orange;}

/*ハッシュが当たっているノードによってtopをずらす*/
#p0:target~#pages{top:     0;}
#p1:target~#pages{top: -100%;}
#p2:target~#pages{top: -200%;}
#p3:target~#pages{top: -300%;}