こんな感じになるかなぁ
- 通常のスクロールバーを殺しているので、ユーザビリティー的に難があります
- ページ移動のためのダミーノードが存在するためセマンティクスの観点で難があります
※もっと良い方法があるかもしれません
HTML
1<div id="anchors">
2 <a href="#p0">0</a>
3 <a href="#p1">1</a>
4 <a href="#p2">2</a>
5 <a href="#p3">3</a>
6</div>
7<div class="targets" id="p0"></div>
8<div class="targets" id="p1"></div>
9<div class="targets" id="p2"></div>
10<div class="targets" id="p3"></div>
11<div id="pages">
12 <div>0</div>
13 <div>1</div>
14 <div>2</div>
15 <div>3</div>
16</div>
CSS
1/*スクロールバーを殺す*/
2html,body{
3 overflow: hidden;
4}
5/*ページ移動のためのリンク*/
6#anchors{
7 position: fixed;
8 z-index: 1;
9 bottom: 0;
10 left: 0;
11 background-color: yellow;
12}
13/*ハッシュによるtarget擬似クラスを有効化するためのダミーノード*/
14.targets{
15 display: none;
16}
17/*ページコンテナ(この位置をアニメーション化することでスクロールを表現する)*/
18#pages{
19 position: absolute;
20 width: 100%;
21 height: 100%;
22 top: 0;
23 left: 0;
24 overflow: visible;
25 transition: top 1s ease 0s;
26}
27/*ページの設定*/
28#pages>div{
29 width: 100%;
30 height: 100%;
31}
32#pages>div:nth-child(even){background-color: yellow;}
33#pages>div:nth-child(odd){background-color: orange;}
34
35/*ハッシュが当たっているノードによってtopをずらす*/
36#p0:target~#pages{top: 0;}
37#p1:target~#pages{top: -100%;}
38#p2:target~#pages{top: -200%;}
39#p3:target~#pages{top: -300%;}
動作例
https://jsfiddle.net/defghi1977/n7xc0tme/2/