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

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

返回顶部的示例

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

  1. Snippets 目录中单击添加新片段

  2. 将代码片段命名为 back-to-the-top,然后单击创建代码片段。您的代码片段文件将在代码编辑器打开。

  3. 将以下代码粘贴到新创建的 back-to-the-top 文件中:

    ```html {% comment %} 如果需要在页面上的更高位置显示“返回顶部”按钮,请降低下方的值。此值以像素为单位。{% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} 按钮位置与浏览器底部的垂直偏移。{% endcomment %} {% assign position_from_bottom = '6em' %}

    返回顶部 {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. 点击保存

    包含代码片段

    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 进行销售了吗?

免费试用