I am trying to understand why this JS snippet isn't working, could use some guidance adding to WP

Question

I am trying to mess around with some JS and using snippets trying to get them to work on clean WP installs so that I understand how to add them Wordpress properly.

I am working with JSFiddle

This is the link that im testing it on

    (function() {
  var delay = false;

  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    $('html,body').animate({
      scrollTop: a[i].offsetTop
    });
  });
})();

Here is the fiddle I am trying to implement.

It seems to be trying to do something on scroll and gets stuck.

Steps I have taken:

Added HTML to page Added CSS to style.css Added link to Jquery in header Added the JS snippet in a tag before

I'm thinking maybe it has something to do with the fact that its got more elements on the page than just a and tag maybe? Seems to be getting caught on the header. This JS is just kind of hard for me to reverse engineer with the little that I know unfortunately.

Thanks.

Answer 1

The javascript listens to your mouse wheel event. If you mouse wheel up or down, it will first check if you're currently "wheeling" too fast. If you are, it will delay you. If you're not, then it will scroll (animate) to your next anchor tag and that anchor tag will be up top.

EDIT: I see you're getting a js error on your site. Remove the $ from the

$(function() {
  var delay = false;
  //blah blah
}