title: jQuery - Take control of the page when scrolling
body: <p>I got this website in which there are 5 blocks and everyone has got the viewport size, 100% width and 100% height. So when the page loads you can just see the 1st one. The other ones are beneath it. Then when you scroll down you see the 2nd one, then the 3rd one and so on, until you reach the end of the page where the last one is located. I was thinking if there's a way to force the page scrolling block-by-block instead of the default linear way. I'd like the user to see directly (well, not directly, but with an animation, if possible) the 2nd block when he scrolls down instead of seeing the way in between the two blocks. Those blocks are like different pages and, without clicking anywhere (cause that would be the easiest (and atm the only) way for me to make it working), I'd like to move across them page-by-page, just scrolling. Is that possible? Thanks!</p>
  
  <p>EDIT:</p>
  
  <p>I tried using the scrollTo plugin, but I couldn't figure it out either.
  Let's just take in account when user scrolls down to make it easier.
  This is what I did:</p>
  
  <pre><code>var tempScrollTop, currentScrollTop = 0; // 2 vars to check if user scrolls down
  var isScrolling = false;
  var nextPage = 2 // I'm on 1st page, I want to show page 2 when user scrolls down;
  $(window).scroll(function(){
    currentScrollTop = $(window).scrollTop(); // current position
  
    if (tempScrollTop &lt; currentScrollTop &amp;&amp; ! isScrolling ){ // if user scrolls down
      isScrolling = true; // animation in progress, shouldn't get into this 'if' till finished
      $(window).scrollTo('section#page-' + nextPage, 1000, {
          onAfter: function(){ isScrolling = false; nextPage++; }
      });
    }
  
    tempScrollTop = currentScrollTop; // update the current position
  });
  </code></pre>
  
  <p>The 'if' statement checks if user scrolled down.
  Technically it should work, BUT after showing me the page I want, he just goes to the next one, then the one after, and it keeps scrolling down till the end! Doing a bit of testing, I've seen that the code that should be executed after EVERY SINGLE animation (which means a single whole-page-scroll) gets executed randomly. I mean, isScrolling = false doesn't occurr, while nextPage++ does, that's why it keeps scrolling (cause it goes to the next page, in fact). Shouldn't it do this AFTER the animation is done, instead of while it's going? I'm confused..</p>