第 54 期 Shopify 添加点击返回到顶部按钮 Back to the top

点击这里查看视频演示

增强版主题已添加此功能，可以直接迁移到增强版，拥有全部功能

免插件点击返回到顶部，方便客户浏览，降低跳出率。

第 143 期一元开店低成本拥有你自己的 Shopify 店铺

限时福利：既可用于创建新的店铺，也可以创建测试店铺（例如免费试用插件 APP 等），避免测试插件时代码残留在主题中，拖慢店铺网速。

Shopify BlogShopify2006

第 142 期适用于所有 Shopify 推出的主题增强版本添加三十几项功能

Shopify增强版主题，添加几十项功能，支持一键开启或关闭。适用于所有Shopify推出的 2.0 版九款主题，减少插件安装，降低每个月的插件订阅费。访问查看具体内容与视频演示

Shopify BlogBeans

💡

增强版主题采用另一种方式实现这个功能，降低对店铺加载速度的影响

1. 创建 Snippet back-to-the-top.liquid

{% comment %}
修改 ‘1200’ 来决定客户需要滚动多远才显示按钮：
{% endcomment %}
{% assign vertical_offset_for_trigger = 1200 %}
{% comment %}
修改 ‘em’ 前的数字来更改按钮距离浏览器底部的距离：
{% endcomment %}
<!-- {% assign position_from_bottom = '2.2em' %} -->
<a href="#" title="Back to the top" class="back-to-top">
<i class="fa fa-angle-double-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
@media screen and (max-width: 500px) {
.back-to-top {
bottom: 6em;
}
}
@media screen and (min-width: 1024px) {
.back-to-top {
bottom: 2.2em;
}
}
.back-to-top {
position: fixed;
right: 1.5rem;
text-decoration: none;
color: #3449b6;
font-size: 16px;
padding: 0.3em;
display: none;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-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;
}
</style>

<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script> <!-- 如主题已引入，则不必重复引入 -->

<script>
window.onload = function() {
jQuery(function($) {
var offset = {{ vertical_offset_for_trigger }};
var duration = 500;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
}
else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
e.preventDefault();
$('html, body').animate( { scrollTop: 0 }, duration);
return false;
})
});
}
</script>

2. 在 Layout 文件夹，打开 theme.liquid

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

在 </body> 标签之前，加上以上代码

{% unless template contains 'index' %}
    {% render 'back-to-the-top' %}
{% endunless %}

提示: 如果不想出现在网站首页, 则使用

至此已完成。以下为旧版样式，可忽略，也可替换第一步中的代码

{% comment %}
修改 ‘1200’ 来决定客户需要滚动多远才显示按钮：
{% endcomment %}
{% assign vertical_offset_for_trigger = 1200 %}
{% comment %}
修改 ‘rem’ 前的数字来更改按钮距离浏览器底部的距离：
{% endcomment %}
{% assign position_from_bottom = '6rem' %}
<a href="#" title="Back to the top" class="back-to-top">
<i class="fa fa-hand-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: 2rem;
text-decoration: none;
color: #999;
background-color: transparent;
font-size: 16px;
padding: 0.3em;
display: none;
-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;
}
</style>

<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

<script>
window.onload = function() {
jQuery(function($) {
var offset = {{ vertical_offset_for_trigger }};
var duration = 500;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
}
else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
e.preventDefault();
$('html, body').animate( { scrollTop: 0 }, duration);
return false;
})
});
}
</script>