HTML :-
<div class="div"
style="text-align: center; color: green">
Gallery</div>
<div class="div" style="background-color:
#aaa">
Page 1</div>
<div class="div" style="background-color:
#444">
Page 2</div>
<div class="div" style="background-color:
blue">
Page 3</div>
<div class="div" style="background-color:
#ccc">
Page 4</div>
<div class="div" style="background-color:
pink">
Page 5</div>
Script : -
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var
divs = $('.div');
divs.css('height',$(
document ).height());
var
dir = 'up'; //
wheel scroll direction
var
div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function(e) {
if
(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
dir = 'down';
} else
{
dir = 'up';
}
//
find currently visible div :
div = -1;
divs.each(function(i) {
if
(div < 0 && ($(this).offset().top
>= $(window).scrollTop())) {
div = i;
}
});
if
(dir == 'up' && div > 0) {
div--;
}
if
(dir == 'down' && div <
divs.length) {
div++;
}
//console.log(div,
dir, divs.length);
$('html,body').stop().animate({
scrollTop:
divs.eq(div).offset().top
}, 200);
return
false;
});
$(window).resize(function() {
$('html,body').scrollTop(divs.eq(div).offset().top);
});
});
</script>
