Update scroll position on resize of window

Question

I'm currently using a combination of smooth scroll and IDs/anchor tags to scroll to content on my site. The code below is getting the ID of the next 'section' in the DOM, and adding it's ID as the 'view next section' href, so once it's clicked, it'll scroll to the top of that div. Then, it iterates through, updating the href with the next ID each time etc until the last section is seen and it scrolls back to the top. Pretty straightforward.

The only problem is that the 'sections' are fullscreen images, so as it's scrolling to the top of the next section, if you resize the browser, the top position of that section (where we scrolled to) has moved, and means the position is lost.

I've created a JSFiddle. You can see this happening after you click the arrow to visit the next section then resize the window: http://jsfiddle.net/WFQ9t/3/

I'm wanting to keep this top position fixed at all times so even if you resize the browser, the scroll position is updated to reflect this.

Thanks in advance, R

var firstSectionID = $('body .each-section').eq(1).attr('id');
$('.next-section').attr('href', '#' + firstSectionID);

var i = 1;
$('.next-section').click(function() {

    var nextSectionID = $('body .each-section').eq(i).attr('id');
    i++;
    $('.next-section').attr('href', '#' + nextSectionID);

    var numberOfSections = $('body .each-section').length;
    var lastSectionID = $('body .each-section').eq(numberOfSections).attr('id');

    if ($('.next-section').attr('href') == '#' + lastSectionID ) { 
        $('.next-section').attr('href', '#introduction');
        i = 1;
    }

});

Answer 1

Ok, Please check out this fiddle: http://jsfiddle.net/WFQ9t/9/

The few things I did were:

1. 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;
   

2. Then I tossed those variables into your resizeContent() function

   resizeContent(initWinHeight, numSection)
   

   so that it will work on load and resize

3. 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"
   });
   

4. Then in your click function, I add 1 to the section number, reset the initial window height and then also reset the body to top: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);
   

5. 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.