第 155 期快速在 Shopify 任意主题中设置点击锚点跳转平滑滚动到指定位置

更新于 Nov 16, 2024

用途：可平滑滚动到当前页面的特定位置，而无需等待重新加载。

💡

提示：设置锚点时不带 # 号，设置链接时带 # 号但结尾无 /

创建 section

anchor.liquid

anchor

粘贴以下内容并保存：

<style>
  html {
      scroll-behavior: smooth;
  }
</style>

<div id="{{ section.settings.anchor }}">&nbsp;</div>

{% schema %}
  {
    "name": "锚点跳转 🐰🐰",
    "settings": [
      {
        "type": "text",
        "id": "anchor",
        "label": "锚点名称",
        "info": "[使用参考](https://shopify2006.com/add-anchor-to-shopify-themes/) 英文状态下输入小写名称, 再设置带 # 号的跳转链接, 例如: #new"
      }
    ],
   "presets": [
      {
        "name": "锚点跳转 🐰🐰",
        "category": "Added by shopify2006"
      }
    ]
  }
{% endschema %}

添加模块，设置锚点和链接即可使用，具体操作可参考上方视频教程。