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

点击这里查看 带字幕 视频教程     本期 YouTube 链接(免登录观看 4K)

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

💡
提示:设置锚点时不带 # 号,设置链接时带 # 号但结尾无 /

创建 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 %}

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

相关内容推荐:

第 103 期 店铺装修之模块间距调节器
Shopify 主题自带的间距并不完美?觉得不满意却不知道怎么改代码?本期内容我将教你如何添加一个拖动就能轻松调整各个模块之间间距的功能。

近期推荐:

014 免费在 Shopify EDM 中添加倒计时的两种方法
点击这里查看视频教程 免网络代理观看 免费倒计时生成工具 - Sendtric * 随便填写一个邮箱 * 设置时区、倒计时结束时间、语言 * 修改颜色,点击 Generate 即可获得代码 * 提示:修改颜色需要重新 Generate、代码需要复制添加到邮件中 不限浏览量的多样式生成工具 - CountdownMail * 生成动图之后获取代码,添加 div 到底部,遮挡水印,示例: * 在 Klaviyo 中添加 Text 模块,并切换到源代码模式进行粘贴 * 截图和取色工具 <div style=“text-align: center;”> <!-…
第 143 期 一元开店 低成本拥有你自己的 Shopify 店铺
打造属于自己的Shopify网店,无需任何编程技能。这个网址提供了一键式 Shopify 店铺搭建服务,只需低成本就可以立即拥有属于自己的专业电子商务平台。限时福利:既可用于创建新的店铺,也可以创建测试店铺(例如免费试用插件 APP 等),避免测试插件时代码残留在主题中,拖慢店铺网速。

内容标签:   #B站教程