在长页面上添加“返回顶部”按钮

如果您的页面较长并需要大量滚动,您可以在模板中添加返回顶部按钮。

返回顶部的示例

创建 back-to-the-top 代码片段

包含代码片段

  1. Layout 文件夹中,打开 theme.liquid 文件。
  2. 滚动到该文件底部。在结束 </body> 标记正上方,粘贴此代码:
{% render 'back-to-the-top' %}

您的代码应如下所示:

返回顶部包含代码片段

  1. 点击保存

配置“返回顶部”按钮(可选)

若要自定义“返回顶部”按钮,请点击此处并查看代码片段的第一行。

  • 若要更改按钮相对于浏览器底部的位置,请编辑 position_from_bottom 值:
{% assign position_from_bottom = '4em' %}
  • 若要更改在显示按钮之前客户需要向下滚动的距离,请编辑 vertical_offset_for_trigger 值:
{% assign vertical_offset_for_trigger = 300 %}

提示:设置 vertical_offset_for_trigger 值时不能使用单位,并且它必须是一个像素值。

演示商店

访问演示商店以查看此自定义设置的示例。

准备好开始使用 Shopify 进行销售了吗?

免费试用