Не могу использовать асинхронную задержку со скриптом Jquery

Question

Я пытаюсь использовать async defer с этим скриптом, но это влияет на функциональность. Я не уверен, что я делаю не так? Если вам нужно зайти на сайт, вот информация: 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>

Answer 1

При defer ваши скрипты загружаются в указанном порядке, но не раньше, чем сам документ (включая встроенный код).

Вы можете сделать одну из двух вещей:

1. Переместите встроенный код во внешний файл при использовании defer
2. Оберните свой встроенный код в DOMContentLoaded обратный вызов события

И обратный вызов будет выглядеть так:

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