简短回答：可以通过锚点链接实现
可以。只需为首页分块指定一个ID（例如 reviews），然后将标签的链接设置为 /#reviews。浏览器会自动滚动到ID与 # 后的名称匹配的元素。建议使用自定义ID，因为Shopify为JSON模板分块自动生成的ID可能会发生变动。
HTML锚点链接可让底部标签直接跳转到首页任意元素。点击时浏览器检索DOM中匹配的ID并移入视口。根据网页规范，元素ID在整份文档中必须严格唯一。由于Shopify对JSON模板分块自动生成的动态ID在分块变动时容易重置，配置自主可控的稳定ID至关重要。
移动标签栏是一种常驻固定在手机屏幕底部的导航菜单。构建优秀的 移动标签栏架构设计，核心在于帮助进店顾客一触即达关键浏览场景——无论是浏览专辑，还是直达首页上的用户评价区。
锚点链接在Shopify首页的工作原理
/#reviews 语法的真实含义
形如 /#reviews 的地址包含三道指令：前置斜杠 / 指向首页根路径，# 是片段起始定界符，reviews 指定目标元素ID。触发时浏览器滚动容器使该元素呈现，遵循 scrollIntoView() 原生逻辑。若仅写 #reviews，在商品页将无法跳转。保留前置斜杠可确保先回到首页再执行定位。
自动生成的分块ID与自定义ID的区别
Shopify的每个分块都被包裹在带有 class="shopify-section" 且以 shopify-section- 开头的外部 div 容器中。静态Liquid分块ID为去掉 .liquid 的文件名。在JSON模板中，ID由Shopify动态生成（参阅 Liquid Objects: Section），格式类似 shopify-section-template--123456__reviews。直接复制该ID适合快速测试，但分块被重新创建后ID可能变化并导致断链。自行设置ID可让链接不依赖Shopify的自动生成。
| 属性维度 | 系统自动生成的动态分块ID | 自主可控的自定义分块ID |
|---|---|---|
| 示例格式 | shopify-section-template--123456__reviews |
reviews |
| 稳定性 | 脆弱（重新创建分块时可能变动） | 稳定（由你掌控，只要该代码块仍在） |
| 控制权归属 | Shopify底层主题渲染引擎 | 独立站商家或前端开发人员 |
| 适用场景 | 临时功能排查或快速验证效果 | 正式发布的站点导航菜单与移动标签栏 |
步骤 1：为分块分配一个稳定的 ID
要配置锚点跳转，移动端浏览器需要一个确定的元素ID作为目标。通常有两种方式：审查现有主题代码进行快速临时测试，或者插入独立的专用锚点区块以确保正式运营的稳定性。
快速测试可审查DOM。分块包含在带有 class="shopify-section" 且ID形如 shopify-section-template--123456__reviews 的外部 div 中（参阅 Section Rendering API）。复制该ID即可立即测试，但该ID可能变化并导致链接失效。
长效方案是声明由你自主掌控的自定义ID。如果当前主题支持 Custom Liquid 或自定义HTML分块，可将其置于目标分块正上方并插入一行精炼的代码：
<div id="reviews"></div>
锚点ID请使用纯小写字母与连字符。MDN Web Docs id 属性 规范严格要求ID在全篇文档中必须唯一。若重复命名，跳转结果将不可靠。在修改代码前请务必先复制备份主题。
图 1：概念示意图 — 自动生成的动态分块ID与通过Custom Liquid配置的稳定自定义ID对比
步骤 2：将锚点链接添加到标签
主题自带标签栏（自定义链接分块）
部分主题内置了移动端底栏。如Zest主题文档将自定义链接分块描述为“根据需要将顾客重定向到附加的链接页面”。该文档未提及锚点，因此请自行尝试并测试：在主题编辑器中进入底栏配置，填入 /#reviews。
第三方应用提供的标签栏
若通过独立应用搭建底栏，需查看开发文档确认链接选择器是否支持锚点符号。部分应用有自己的滚动到元素的语法（例如后文介绍的 Navi+ 的 scroll:OnPage）。
若底部标签栏在全站常驻展示，请务必将链接写为 /#reviews 而非 #reviews。当顾客在商品详情页点击仅包含 #reviews 的标签时将毫无响应。前置斜杠 / 能确保浏览器先返回首页再定位分块。
关于现代Shopify主题移动端导航架构的深度分析，欢迎参阅我们的 Horizon 主题深度评测。
步骤 3：在手机上测试（平滑滚动与吸顶标头偏移）
在模拟器中测试无法还原真实触控体验。务必在真实的物理智能手机上实测锚点标签：在首页点击，以及在商品详情页发起点击。
浏览器默认瞬间切换到锚点位置。为了提供平滑滑动过渡，请在全局样式表中追加 CSS scroll-behavior: smooth;。MDN Web Docs CSS scroll-behavior 规范指出该属性控制导航触发时的滑动表现：
html {
scroll-behavior: smooth;
}
解决吸顶标头遮挡问题。浏览器默认将目标元素顶边与视口顶端对齐，标头会遮盖标题。根据 MDN Web Docs Element: scrollIntoView() 规范，在有固定标头时推荐使用 scroll-margin-top 调整外边距：
#reviews {
scroll-margin-top: 80px; /* Adjust according to your sticky header height */
}
提示：80px 仅为示例值——请实测手机端标头的实际高度并按需调整像素值。同时确认常驻底部标签栏没有遮挡分块末尾的操作按钮。
图 2：概念示意图 — 被吸顶固定标头遮挡的分块标题与通过 scroll-margin-top 修复后的正常显示效果对比
锚点链接失效时的排查方法
若点击移动端标签无滚动反馈或跳转位置出现偏移，请重点检查以下5项常见原因：
-
分块变动导致ID重置：若绑定了自动生成的ID（
shopify-section-...），微调分块后代码会更新。请换用Custom Liquid自定义ID。 -
页面存在重复ID：若多个分块共用同一ID，浏览器仅定位到第一个出现的节点。请确保自定义ID整页唯一。
-
第三方插件分块：外部评价应用渲染的分块通常不支持自定义ID设置。可直接在其上方放置一个空的
<div id="reviews"></div>。 -
懒加载引起的布局漂移：包含延迟加载图片的分块在渲染时会变动页面高度。在移动端尝试二次点击标签，观察位置是否恢复准确。
-
展开的抽屉菜单未收起：若侧滑 移动端抽屉菜单实践 仍处于展开状态会挡住视线。确保标签点击事件能同步收起开启的抽屉菜单。
| 链接书写格式 | 在首页发起点击 | 在其他页面（如商品详情页）发起点击 |
|---|---|---|
#reviews |
滚动至用户评价分块 | 无任何可见反应（当前页面不存在该目标ID） |
/#reviews |
滚动至用户评价分块 | 先加载返回首页，并在页面就绪后精准定位至该分块 |
锚点链接与独立页面或专辑的权衡对比
尽管将底部标签链接到首页分块能提供极速触达的路径，但这并不适用于所有内容类型。在页面内跳转锚点与独立页面之间做选择，需要权衡搜索引擎索引限制与移动端操作工效学。
当目标内容天然从属于首页时（如顾客评价、品牌画册或精简问答），锚点链接优势显著。顾客无需整页重载即可瞬时查验信誉背书，完整保留其浏览脉络。
然而若以搜索引擎自然收录为导向，锚点片段则无法满足要求。Google 搜索通常不支持通过 URL 片段来提供独立的网页内容（参阅 Google Search Central URL 结构指南）。不要指望 /#reviews 会作为独立页面出现在搜索结果中。若希望评价归档页获得独立排名，必须配置专属URL（如 /pages/reviews 或 /collections/all）。
移动标签栏的核心定位是平级视图切换。在底栏塞入过多锚点容易引发认知混乱。建议将锚点标签控制在1至2个高价值目标以内。如需深入理解协同架构规范，可参阅我们的战略指南 超越汉堡菜单的移动端导航。
| 策略架构模型 | 最佳适用场景 | 核心竞争优势 | 必须权衡的局限 |
|---|---|---|---|
锚点跳转链接 (/#reviews) |
首页评价集锦、视觉画册、精简问答清单 | 零延迟瞬时聚焦且无需整页重载；完整保留用户浏览现场 | 无法被Google搜索独立收录；若过多配置会导致底栏臃肿失焦 |
独立页面或专题专辑 (/pages/reviews) |
完整用户评价库、详细尺码对照表、特定商品系列 | 享有独立的搜索索引抓取权重及富媒体摘要（Rich Snippets）展示机会 | 伴随整页重载的等待成本；促使顾客跳出当前的首页营销转化漏斗 |
Navi+ 在其中的应用场景
若通过专为Shopify打造的移动端底栏系统 Navi+ Tab Bar 来管理导航，分块滚动能力已原生内置于应用之中。
在 Navi+ 控制面板中，每个标签均配有 Link To 字段。对于 Business 和 Elite 套餐用户，填入 scroll:OnPage(#reviews) 语法即可自动触发平滑滚动至匹配该CSS选择器的DOM节点。
Navi+ 具备清晰的规则约定：将 Link To 留空代表直接指向首页根路径。站内链接统一使用无域名前缀的精简短路径，如 /collections/all。单个 # 仅专用于展开折叠菜单而不跳转——切勿将该展开符号与带有定位功能的 scroll:OnPage(#reviews) 混为一谈。
即便使用专用语法，基础规范依然必须严格执行：分块需具备稳定ID（步骤1），且必须在移动端实机使用 scroll-margin-top 校准吸顶标头遮挡（步骤3）。由于 scroll:OnPage 滚动到当前页面内的元素，请在依赖它之前，分别从首页和其他页面测试该标签。
如果你正在使用 Navi+ Tab Bar，只需在对应标签的 Link To 字段中填入 scroll:OnPage(#reviews)，即可在手机端实时测试平滑滚动体验——所有受支持的完整链接模式均汇总于 Navi+ 帮助中心。欢迎查阅官方文档 Navi+ 链接类型支持 获取技术部署详情。
实施检查清单
- 明确希望移动端顾客点击后直接跳转定位的首页分块。
- 在目标上方插入空 Custom Liquid 分块（
<div id="reviews"></div>）声明稳定ID。 - 将标签链接设置为
/#your-id（或应用专用语法如scroll:OnPage）。 - 在CSS中添加
html { scroll-behavior: smooth; }启用平滑滚动。 - 在CSS中配置
scroll-margin-top消除吸顶标头对标题的遮挡。 - 在真实手机上实测：分别验证在首页及内层商品页发起的跳转表现。
- 将配置的自定义ID记录在店铺文档中，避免后续改版时不慎误删。
常见问题解答（FAQ）
在哪里可以查找到Shopify分块的ID？
每个分块都被包裹在带有形如 shopify-section-... 的ID属性的外部 div 容器中。在桌面端浏览器上右键点击并选择“检查”即可查验。
为什么之前配置好的锚点链接会突然失效？
Shopify对JSON模板分块ID采取动态生成机制。分块重新添加会导致代码重置。通过 Custom Liquid 声明自定义ID可保障长期有效。
为什么跳转后分块的标题文字会被吸顶标头遮挡？
浏览器默认将元素顶边与视口顶端对齐，吸顶标头会直接遮盖标题。在CSS中添加 scroll-margin-top 即可建立防遮挡偏移量。
我能否在同一个页面中多次复用相同的ID名称？
绝对不可以。HTML规范严格规定 id 属性在整份文档中必须全局唯一。重复命名ID将导致不可预料的定位缺陷。
Google搜索是否会将 /#reviews 作为独立网页收录到索引中？
不会。Google搜索通常不支持通过URL片段索引独立网页内容。若希望特定内容被单独收录，必须建立专属页面。
Navi+ 是否支持将标签栏中的标签直接链接到指定分块？
完全支持。在 Navi+ Tab Bar 中，在 Link To 字段填入 scroll:OnPage(#section-id) 即可调度针对CSS选择器的平滑滚动（Business和Elite套餐）。
参考来源
- Shopify Developer Documentation: Liquid Objects: Section
- Shopify Developer Documentation: Section Rendering API
- MDN Web Docs: HTML id attribute
- MDN Web Docs: Element: scrollIntoView() method
- MDN Web Docs: CSS scroll-behavior
- Google Search Central: URL Structure Guidelines
- FoxEcom Zest Theme Documentation: Mobile Navigation Bar
- Navi+ Help Center: Menu Item Link Types
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。