title: Scroll to other div by scrolling a little bit down/up with mouse wheel
body: <p>This is what I would like to achieve <a href="http://www.rogerdubuis.com/" rel="nofollow">http://www.rogerdubuis.com/</a> and this is my current code:</p>
  
  <pre><code>var offsetArray = Array();
  offsetArray[0] = $('header');
  offsetArray[1] = $('#puslapis2');
  offsetArray[2] = $('#puslapis5');
  offsetArray[3] = $('#puslapis7');
  offsetArray[4] = $('#puslapis9');
  var pos = 0;
  var lastScrollTop = 0;
  
  $(window).scroll(function () {
      console.log("pos " + pos);
      var st = $(this).scrollTop();
      if (st &gt; lastScrollTop) {
          console.log("Scroll down");
          $('html,body').animate({scrollTop: offsetArray[pos + 1].ofset().top}, 'slow', function () {pos++;});
      } else {
          console.log("Scroll up");
          $('html,body').animate({scrollTop: offsetArray[pos - 1].ofset().top}, 'slow', function () {pos--;});
      }
      lastScrollTop = st;
  });
  </code></pre>
  
  <p>After scrolling a little bit down, animate should be called only once and pos should increase by one. But it scrolls down and up and mess happends. Any ideas how to prevent that?</p>