html - 1 つのページに div をスタックし、それらの間を移動する

Question

このグラフィックは、私がやろうとしていることを大まかに表しています。左上の 2 番目の長方形はビューポートを表します。これは、各 div がビューポート全体をカバーし、他の 3 つのいずれも表示されないようにする必要があることを意味します。

だから私はこのcssを使用しました：

body  {overflow : hidden;}

#page {width:200%;
       position : absolute;}

#page div {width: 50%;
       position:relative;
       height: 100%;}

次に、div 間を移動できるようにアンカー タグを div に配置します。しかし、うまくいきません。2 番目の div には問題なく到達しましたが、他の div には移動できません。これはjqueryで解決できることはわかっていますが、jqueryを使用してトランジションをアニメーション化するだけで、純粋なHTMLとCSSでこれを行いたいと思います。

どうすればいいのですか？

これがJSFIDDLEです