<div id="wrap">
  <div class="page">
   <div class="p p1"> page1 </div> 
   <div class="p p2"> page2 </div> 
   <div class="p p3"> page3 </div> 
   <div class="p p4"> page4 </div> 
  </div>
  <div class="page1"></div>

</div>

    *{ margin:0px;padding:0px;}
    #wrap{ position: absolute; width:100%; height: 100%; overflow: hidden; }
    .page,.page1{position:relative;}
    .p1{ background: red;} 
    .p2{ background: green; } 
    .p3{ background: blue; } 
    .p4{ background:#000; }

<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="jquery.easing.min.js"></script>

<script type="text/javascript">
   var h = window.innerHeight;
   var i = 0;
   $("#wrap div").height(h);
   $(".page1").html($(".page").html());
   $("#wrap").click(function(){
     if(i<4){
         i++;
         $(".page").stop().animate({top:-h*i},{easing:'easeInQuad', duration:1000});
         if(i==4){
            $(".page1").stop().animate({top:-h,Zindex:"10"},{easing:'easeInQuad', duration:1000});
            $(".page").css({"top":"0px"});
         } 
     }else{
         i=1;
         $(".page").stop().animate({top:-h*i},{easing:'easeInQuad', duration:1000});
         $(".page1").stop().animate({top:-h,Zindex:"0"},{easing:'easeInQuad', duration:1000}); 
     }
   })
</script>