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

注意

模板商店中不提供经典模板。这些模板没有 Shopify 的 Online Store 2.0 模板中包含的功能，并且 Shopify 免费经典模板不会收到除安全性修复以外的更新。

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅 Support for themes。

备注

此自定义用于经典 Shopify 模板，不适用于“Online Store 2.0”模板。

• 找到您的模板架构版本
• 探索“Online Store 2.0”模板自定义

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

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

桌面

1. 在 Shopify 后台中，转至在线商店 > 模板。
2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
3. 在 Snippets 目录中点击添加新片段。
4. 将代码片段命名为 back-to-the-top，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。
5. 将以下代码粘贴到新创建的 back-to-the-top 文件中：

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>

1. 点击保存。

iPhone

1. 在 Shopify 应用中，点击 … 按钮。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
5. 在 Snippets 目录中点击添加新片段。
6. 将代码片段命名为 back-to-the-top，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。
7. 将以下代码粘贴到新创建的 back-to-the-top 文件中：

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>

1. 点击保存。

Android

1. 在 Shopify 应用中，点击 … 按钮。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
5. 在 Snippets 目录中点击添加新片段。
6. 将代码片段命名为 back-to-the-top，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。
7. 将以下代码粘贴到新创建的 back-to-the-top 文件中：

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>

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 值时不能使用单位，并且它必须是一个像素值。

演示商店

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