title: Too many scroll events for smooth scrolling
body: <p>Hello there I've been trying to find a fix for the many scroll events firing on one scroll. This is the only thing close to working for me so far. I want to smoothscroll between two divs (#boxes and #header) I want to use the scroll bar to trigger this smooth scroll and not a button. Any suggestions on how to only take one scroll event? I also used solutions based from prev stackoverflow questions. I used my own locator instead of offsets because thats also unreliable   </p>
  
  <pre><code>$(window).scroll(function () {
  
      if (timer) {
          window.clearTimeout(timer);
      }
  
      timer = window.setTimeout(function () {
          if (locator == 0) {
              id      = $("#boxes");
              locator = 1;
          } else if (locator = 1) {
              id      = $("#header");
              locator = 0;
          }
  
  
          // target element
          var $id = $(id);
          if ($id.length === 0) {
              return;
          }
  
          // top position relative to the document
          var pos = $id.offset().top;
  
          // animated top scrolling
          $('html, body').animate({scrollTop: pos}, 1500, function () {
              $('html, body').clearQueue();
              $('html, body').stop();
          });
  
      }, 2);
  
  });
  </code></pre>