OlegGarmash,
ниже макет и вариант решения ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body,html{
height: 100%;margin: 0;
padding: 0;
}
p{
height: 100%;
background-color: #FF00FF;
margin: 0;
padding: 0;
}
.r{
background-color: #FF0000;
}
.b{
background-color: #DCDCDC;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function() {
var timer;
jQuery(window).on("mousewheel DOMMouseScroll", function(event) {
window.clearTimeout(timer);
var up = event.originalEvent.wheelDelta || -event.originalEvent.detail;
timer = window.setTimeout(function() {
var height = jQuery(window).height();
if (height > jQuery(window).scrollTop()) {
up > 0 && (height = 0);
$("body, html").stop().animate({
scrollTop: height
}, 800)
}
}, 100)
})
});
</script>
</head>
<body>
<p class="b">test</p>
<p>test</p>
<p class="r">test</p>
<p>test</p>
</body>
</html>