<html>
<head>
<title> New Document </title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
html,body {margin:0;padding:0;font-size:20px;color:#fff;text-align:center;}
</style>
<script type="text/javascript">
(function($){
$.aniPage=function(e){
if(e.originalEvent.wheelDelta > 0){
$("body, html").animate({
scrollTop:$(window).scrollTop()-$(window).height()
},800,function(){
$.aniOk = 0;
});
}else{
$("body, html").animate({
scrollTop:$(window).scrollTop()+$(window).height()
},800,function(){
$.aniOk = 0;
});
}
};
})(jQuery);
$(function(){
$(".contInner").height($(window).height());
$.aniOk=0;
$(window).scrollTop(0);
});
$(document).on("mousewheel",function(e){
e.preventDefault();
if($.aniOk == 0){
$.aniPage(e);
$.aniOk = 1;
}
});
</script>
</head>
<body>
<div id="wrap">
<div class="contInner" style="background-color:#339966">1</div>
<div class="contInner" style="background-color:#663366">2</div>
<div class="contInner" style="background-color:#CC0066">3</div>
<div class="contInner" style="background-color:#3366FF">4</div>
</div>
</body>
</html>
