title: JQuery Jump to Anchors on Scroll
body: <p>Aiming to do something similar to <a href="http://promo.oce.leagueoflegends.com/en/lunar-revel-2014/" rel="nofollow">this</a> where the page jumps to anchors on the page when you scroll down. I'm no expert with JQuery or JS in general (backend languages PHP and MySQL are my areas of preference) I grabbed a couple of scripts and put them together. There will be three anchors on the page, so it's meant to jump to the next one down when you scroll down and the next one up when you scroll up. However, when it scrolls to the second one it keeps scrolling past it even when I'm not still scrolling. This is the script:</p>
  
  <pre><code>var section = 1;
  
  function scrollToAnchor(variable){
      var aTag = $("a[name='"+ variable +"']");
      $('html,body').animate({scrollTop: aTag.offset().top},'slow');
  }
  
  $(function(){
     //Keep track of last scroll
     var lastScroll = 0;
     $(window).scroll(function(event){
         //Sets the current scroll position
         var st = $(this).scrollTop();
         //Determines up-or-down scrolling
         if (st &gt; lastScroll &amp;&amp; section &lt; 3){
            //Going down
             section = section + 1;
             scrollToAnchor('section'+section);
             lastScroll = st;
         } else if(st &lt; lastScroll &amp;&amp; section &gt; 1){
            //Going up
             section = section - 1;
             scrollToAnchor('section'+section);
             lastScroll = st;
         }
         //Updates scroll position
         lastScroll = st;
     });
  });
  </code></pre>
  
  <p>And the fiddle: <a href="http://jsfiddle.net/tBN64/4/" rel="nofollow">http://jsfiddle.net/tBN64/4/</a></p>