title: Waypoints JS and anchor links issue
body: <p>I have a bunch of articles on a page, I'm using Waypoints JS to trigger a scrollTop and snap the article to the top of the page when it enters the viewport, and that's working great.
  I also have a fixed menu at the top with hash links that are supposed to smooth scroll to specific anchored parts of the page.
  The problem is when I click on a link at the menu (let's say the third article): the page quickly scrolls to the third article (as supposed), but then it automatically scrolls up to the first article, then it goes down to the third again, then up to the second and finally back down to the third.</p>
  
  <p>Clearly, the page keeps bouncing because when the page scrolls down to the anchor it's triggering the Waypoints. How can I prevent that from happening? I thought about disabling the specific Waypoints when clicking a link, then enabling it again after scroll, but I'm not sure if that's the best approach or how to do it.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li id="btn1"&gt;&lt;a href="#art1"&gt;Article 1&lt;/a&gt;&lt;/li&gt;
  &lt;li id="btn2"&gt;&lt;a href="#art2"&gt;Article 2&lt;/a&gt;&lt;/li&gt;
  &lt;li id="btn3"&gt;&lt;a href="#art3"&gt;Article 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;article id="art1"&gt;content&lt;/article&gt;
  &lt;article id="art2"&gt;content&lt;/article&gt;
  &lt;article id="art3"&gt;content&lt;/article&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>//smooth scroll
  $('a[href*=#]:not([href=#])').click(function () {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          if (target.length) {
              $('body, html').animate({
                  scrollTop: target.offset().top
              }, 500);
              return false;
          }
      }
  });
  
  //scroll snap to article 1
  var waypoint = new Waypoint({
      element: document.getElementById('art1'),
      handler: function (direction) {
          if (direction === 'down') {
              $('html,body').animate({
                  scrollTop: $('#art1').offset().top - 100
              }, 'slow');
          }
      },
      offset: '99%',
  });
  
  //scroll snap to article 2
  var waypoint = new Waypoint({
      element: document.getElementById('art2'),
      handler: function (direction) {
          if (direction === 'down') {
              $('html,body').animate({
                  scrollTop: $('#art2').offset().top - 100
              }, 'slow');
          }
      },
      offset: '99%',
  });
  
  //scroll snap to article 3
  var waypoint = new Waypoint({
      element: document.getElementById('art3'),
      handler: function (direction) {
          if (direction === 'down') {
              $('html,body').animate({
                  scrollTop: $('#art3').offset().top - 100
              }, 'slow');
          }
      },
      offset: '99%',
  });
  </code></pre>
  
  <p>Thank you for your help.</p>