Ok, Please check out this fiddle: http://jsfiddle.net/WFQ9t/9/
The few things I did were:
Made some global variables to handle the screen number (which screen you're on and also the initial window height. You will use this when the screen loads and also when you click on the
.next-session
arrow.var initWinHeight = $(window).height(); var numSection = 0;
Then I tossed those variables into your
resizeContent()
functionresizeContent(initWinHeight, numSection)
so that it will work on load and resize
I made the
body
move around where it needs to, to accomodate for the movement of the divs (I still don't understand what divs are moving when the regular animation happens).$('body').css({ top: (((windowHeight - initWinHeight)*numSection)*-1) + "px" });
Then in your click function, I add 1 to the section number, reset the initial window height and then also reset the
body
totop:0
. The normal animation you have already puts the next section at the top of the page.numSection++; initWinHeight = $(window).height(); $('body').css({top:"0px"}, 1000);
Finally, I reset the
numSections
counter when you reach the last page (You might have to make this 0 instead of 1)numSection = 0;
The fiddle has all of this in the correct places, these are just the steps I took to change the code.