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

Question

我无法在 Shopify 主题 Debut 中使用 JQuery 进行平滑滚动。

我在theme.liquid文件的</body>标签上方添加了以下代码

  <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

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

谢谢。

Answer 1

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

来自javascript.info：

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

我怀疑如果你：

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

你确实会非常流畅地滚动。

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