Can't Use Async defer with Jquery Script

Question

I'm trying to use async defer with this script but it affects the functionality. I'm not sure what I'm doing wrong? If you need to see the website, Here's the info: The Hangout

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
    $(window).bind("load", function() {
      $(window).scroll(function () {
          if ($(this).scrollTop() > 600) {
              $('.scrollup').fadeIn();
          } else {
              $('.scrollup').fadeOut();
          }
      });
      $('.scrollup').click(function () {
          $("html, body").animate({
              scrollTop: 0
          }, 600);
          return false;
      });
      });
        </script>

Cue · Accepted Answer · 2019-01-17 21:42:15Z

1

With defer your scripts are loaded in the order they are specified, but not before the document itself has been loaded (including inline code).

You can do one of two things:

Move your inline code to an external file while using defer
Wrap your inline code in a DOMContentLoaded event callback

And the callback would look like:

window.addEventListener('DOMContentLoaded', function() {
  $(window).scroll(function () {
    $('.scrollup')[$(window).scrollTop() > 600 ? 'fadeIn' : 'fadeOut']();
  });
  $('.scrollup').click(function () {
    $("html, body").animate({scrollTop: 0}, 600);
    return false;
  });
});

answered Jan 17, 2019 at 21:42

Cue

2,7591 gold badge14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't Use Async defer with Jquery Script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related