title: Stop javascript execution on specific links
body: <p>Hey there :) I have script that adds fadeIn and fadeOut effects when you click anchors. </p>
  
  <p>But it targets all my anchors. Is there a void to avoid the execution from specifics links, like my "back-to-top" link in the footer. It adds the effect for that link, and don't go to stop, since there is no destination url.</p>
  
  <p>JS:</p>
  
  <pre><code>// Page transitions and preventing FOUC(flash of unstyled content).
  jQuery.holdReady(true);
  jQuery("body").css("opacity", 0);
  jQuery.holdReady(false);
  jQuery(function ($) {
      $("body").fadeTo(1500, 1);
      $(document).on("click", "a", function (event) {
  
          // get the href attribute
          // "this" is still the &lt;a&gt; element here
          var newUrl = $(this).attr("href");
  
          event.preventDefault();
          $("body").fadeTo(800, 0, function () {
  
              //here, where you were trying to get the url, "this"
              //points to the animated element, ie body
  
  
              // veryfy if the new url exists or is a hash
              if (!newUrl || newUrl[0] === "#") {
                  // set that hash
                  location.hash = newUrl;
                  return;
              }
  
              //just update the location without fading in at this point
              location = newUrl;
  
              // prevent the default browser behavior.
              return false;
          });
      });
  });
  </code></pre>
  
  <p>And the link to top of the page looks like this:</p>
  
  <pre><code>            &lt;a class="to-top" href="#masthead"&gt;
                  &lt;svg class="skull-up"&gt;
                      &lt;use xlink:href="#skull"&gt;&lt;/use&gt;
                  &lt;/svg&gt;
                  &lt;span class="screen-reader-text"&gt;Tilbage til top&lt;/span&gt;
              &lt;/a&gt;
  </code></pre>