Smooth Scroll не работает с использованием JQuery в дебюте Shopify Theme

Question

Я не могу получить плавную прокрутку, используя JQuery, работающую в дебюте темы Shopify.

Я добавил следующий код над тегом </body> в файле theme.liquid

  <script>
  $(document).ready(function() {
  $('.smooth-scroll').on('click', function(evt) {
    evt.preventDefault();
    $('html, body').animate(
      { scrollTop: $($(this).attr('href')).offset().top},
      300
    );
  });
});
    </script>

HTML переходит на правильный идентификатор div, однако плавной прокрутки нет.

Веб-сайт: https://bunc.bike/pages/test

Кто-нибудь может объяснить, что Я делаю не так?

Спасибо.

Answer 1

Я вижу, что вы включаете jQuery в свою тему через файл vendor.js. Этот файл включается через тег <script> с атрибутом defer="defer".

From javascript .info :

Атрибут defer сообщает браузеру, что он должен go при работе со страницей и загружать скрипт «в фоновом режиме», а затем запускать скрипт при загрузке.

Я подозреваю, что если вы либо:

1. Включил фрагмент кода в вопрос в файле vendor.js, ИЛИ
2. Удалил атрибут defer="defer" из тега vendor.js файла <script>

Вы бы очень плавно прокручивали.

Я доказал свой тезис этим маленьким гифом. Причина, по которой он работает ПОСЛЕ того, как я вставил ваш код в терминал, заключается в том, что браузер проанализировал и загрузил файл vendor, а jQuery доступен в среде браузера js.