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



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

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

PC：

  1. 在 Shopify 后台中，转到在线商店 > 模板。

  2. 找到要编辑的模板，然后点击操作 > 编辑代码。

  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. 在 Shopify 应用中，轻触商店。

  2. 在销售渠道部分中，轻触在线商店。

  3. 轻触 Manage themes（管理模板）。

  4. 找到要编辑的模板，然后点击操作 > 编辑代码。

  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. 在 Shopify 应用中，轻触商店。

  2. 在销售渠道部分中，轻触在线商店。

  3. 轻触 Manage themes（管理模板）。

  4. 找到要编辑的模板，然后点击操作 > 编辑代码。

  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商户官网原文详情：

Add a Back to top button on long pages

If you have pages that are long and require a lot of scrolling, you can add a Back to the top button to your theme.

Create a back-to-the-top snippet

PC：

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to edit, and then click Actions > Edit code.

  1. In the Snippets directory, click Add a new snippet.

  2. Name your snippet back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.

  3. Paste the following code into your newly created back-to-the-top file:

    {% 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>

  4. Click Save.

iPhone：

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme you want to edit, and then click Actions > Edit code.

  1. In the Snippets directory, click Add a new snippet.

  2. Name your snippet back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.

  3. Paste the following code into your newly created back-to-the-top file:

    {% 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>

  4. Click Save.

Android：

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme you want to edit, and then click Actions > Edit code.

  1. In the Snippets directory, click Add a new snippet.

  2. Name your snippet back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.

  3. Paste the following code into your newly created back-to-the-top file:

    {% 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>

  4. Click Save.

Include your snippet

  1. In the Layouts folder, open the theme.liquid file.

  2. Scroll to the bottom of the file. Right above the closing </body> tag, paste this code:

    {% render 'back-to-the-top' %}

    Your code should look like this:

  1. Click Save.

Configure the back to the top button (optional)

To customize your back to the top button, click here and look at the first lines of your snippet.

  • To change the position of your button relative to the bottom of the browser, edit the position_from_bottom value:

{% assign position_from_bottom = '4em' %}

  • To change how far down a customer needs to scroll before the button is revealed, edit the vertical_offset_for_trigger value:

{% assign vertical_offset_for_trigger = 300 %}

Demo store

Visit the demo store to see an example of this customization.

文章内容来源：Shopify商户官方网站


（本文内容根据网络资料整理，出于传递更多信息之目的，不代表连连国际赞同其观点和立场）