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

Question

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

我在 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：

The defer attribute tells the browser that it should go on working with the page, and load the script “in background”, then run the script when it loads.

我怀疑如果你：

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

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

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

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

Smooth Scroll Not Working using JQuery in Shopify Theme Debut

html

jquery

frontend

liquid

shopify