光滑涡旋在Shopify主题首演中不使用JQuery

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 id，但是没有平滑的滚动。

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

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

谢谢。

Answer 1

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

来自javascript.info

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

我怀疑如果你：

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

你会非常顺利的滚动。

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

​

​