html - 在 Shopify 主题首次亮相中使用 JQuery 平滑滚动不起作用

Question

我无法使用在 Shopify 主题 Debut 中工作的 JQuery 获得平滑滚动。

我在文件中的</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 id，但是不存在平滑滚动。

网站：https ://bunc.bike/pages/test

有人能解释我做错了什么吗？

谢谢。

标签： htmljqueryfrontendshopifyliquid

Answer 1

我看到您通过vendor.js文件将 jQuery 包含在您的主题中。该文件是通过<script>带有defer="defer"属性的标签引入的。

来自javascript.info：

该defer属性告诉浏览器它应该继续处理页面，并“在后台”加载脚本，然后在加载时运行脚本。

我怀疑如果你：

1. 在文件中的问题中包含您的代码片段vendor.js，或者
2. 从文件的标签中删除了defer="defer"属性vendor.js<script>

你确实会非常顺利地滚动。

我已经用这个小 gif 证明了我的论文。在我将您的代码粘贴到终端之后它起作用的原因是浏览器已经解析并加载了vendor文件，并且jQuery在浏览器的 js 环境中可用。