title: How can I "snap" scroll to the nearest predefined position?
body: <p>I have a website that is essentially four divs - each of which is set to the height of the window so that the total document is four times the height of the window.</p>
  
  <p>The idea is that a click on a div advances the scroll by one "window height" - which works fine, like this:</p>
  
  <pre><code>// on click event
  
  if(cur_frame&lt;number_slides){
     scrolling = true;
     $('html,body').animate({scrollTop:window_height*cur_frame},function(){
        scrolling=false;
     });
  }
  </code></pre>
  
  <p>After the user scrolls the page manually, however, I'd like to "snap" the position to the nearest multiple of the window height - so a given div is once again centered on the screen. I tried using a timeout, figuring that a small delay would keep it from triggering a thousand times a second...</p>
  
  <pre><code>// on scroll event
  
  clearTimeout(scroll_timer);
  if(!scrolling) scroll_timer = setTimeout(function(){
     if(cur_scroll!=window_height*(cur_frame-1)) {
        scrolling = true;
        $('html,body').stop().animate({scrollTop:window_height*(cur_frame-1)},function(){
           scrolling = false;
        });
     }
  },100); //20? 400? 1000?
  </code></pre>
  
  <p>...but couldn't strike a balance between the script fighting the user over scroll position, or a seriously long delay that defeats the "snapping" effect.</p>
  
  <p>Any suggestions how this might be achieved?</p>