在长页面上添加“返回顶部”按钮
已于 Nov 29, 2023 打印了此页面。若要查看当前版本,请访问 https://help.shopify.com/zh-CN/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-to-top。
如果您的页面较长并需要大量滚动,您可以在模板中添加返回顶部按钮。
创建 back-to-the-top 代码片段
- 在 Shopify 后台中,转至在线商店 > 模板。
- 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
- 在 Snippets 目录中点击添加新片段。
- 将代码片段命名为
back-to-the-top
,然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。 - 将以下代码粘贴到新创建的
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>
- 点击保存。
- 在 Shopify 应用中,点击 … 按钮。
- 在销售渠道部分,轻触在线商店。
- 轻触管理模板。
- 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
- 在 Snippets 目录中点击添加新片段。
- 将代码片段命名为
back-to-the-top
,然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。 - 将以下代码粘贴到新创建的
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>
- 点击保存。
- 在 Shopify 应用中,点击 … 按钮。
- 在销售渠道部分,轻触在线商店。
- 轻触管理模板。
- 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
- 在 Snippets 目录中点击添加新片段。
- 将代码片段命名为
back-to-the-top
,然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。 - 将以下代码粘贴到新创建的
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>
- 点击保存。
包含代码片段
- 在 Layout 文件夹中,打开
theme.liquid
文件。 - 滚动到该文件底部。在结束
</body>
标记正上方,粘贴此代码:
{% render 'back-to-the-top' %}
您的代码应如下所示:
- 点击保存。
配置“返回顶部”按钮(可选)
若要自定义“返回顶部”按钮,请点击此处并查看代码片段的第一行。
- 若要更改按钮相对于浏览器底部的位置,请编辑
position_from_bottom
值:
{% assign position_from_bottom = '4em' %}
- 若要更改在显示按钮之前客户需要向下滚动的距离,请编辑
vertical_offset_for_trigger
值:
{% assign vertical_offset_for_trigger = 300 %}
提示:设置
vertical_offset_for_trigger
值时不能使用单位,并且它必须是一个像素值。
演示商店
访问演示商店以查看此自定义设置的示例。