scroll a full page height up or down with jQuery/Javascript
I've been fiddling with a solution to a similar problem.
All my solution does is monitor when the window scrolls.
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.
Check out the full code at http://jsfiddle.net/dLCwC/1/
Maybe it'll be of some use to someone (let me know if it is, or isn't).
Try this script
$(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 -1) {
div++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 200);
return false;
});
FIDDLE DEMO
Fullscreen Demo
After having to code a page like yours, I've created a simple plugin for this kind of sites fullPage.js (Blog article)
It is in its first version. I will keep improving it as far as I can. Adding a method to be called from a menu would be nice, for example. As well as use o hastags (#) for each section, and so on. This should be done soon as I am using it in my page.
You can find more about its usage at my github account
Living demo: http://alvarotrigo.com/fullPage/
Working in: (IE 8, Chrome, Firefox, Opera > 11, Safari, Touch devices)
I hope it helps!