title: Can't Find Reference to a Function in a JQuery Callback
body: <p>How do I maintain a reference to toggleSelectionInvert within my JQuery callback? Can someone explain in simple terms how the scoping works in JQuery/Javascript (why this isn't working) and how I can get it to work?</p>
  <p>The goal is to have the page scroll to anchor tags when a button is clicked and then after the scroll swap a class to trigger a css colour animation.</p>
  <p>Thanks!</p>
  <pre><code>jQuery(function($){
  
  $('a[href*=&quot;#&quot;]')
    .not('[href=&quot;#&quot;]')
    .not('[href=&quot;#0&quot;]')
    .click(function(event) {
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
        &amp;&amp; 
        location.hostname == this.hostname
      ) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        console.log(target.id);
        if (target.length) {
          event.preventDefault();
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 500, function() {
            toggleSectionInvert();
            var $target = $(target);
            $target.focus();
            if ($target.is(&quot;:focus&quot;)) {
              return false;
            } else {
              $target.attr('tabindex','-1');
              $target.focus();
            };
          });
        }
      }
      });
  
    let toggleSectionInvert = () =&gt;{
      var arr = $( &quot;.front_page_section&quot; ).toArray();
      
      arr.forEach((frontPageSection) =&gt; {
        $(frontPageSection).toggleClass('invert');
      });
    }
  
  });
  </code></pre>
  <p>Te</p>