免插件点击返回到顶部按钮，便于客户浏览操作，降低跳出率
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>
{% comment %}
powered by https://supershopify.online/
{% endcomment %}
2. 在 Layout 文件夹，打开 theme.liquid
{% render 'back-to-the-top' %}
{% comment %}
powered by https://supershopify.online/
{% endcomment %}
在 </body> 标签之前，加上以上代码
{% unless template contains 'index' %}
{% render 'back-to-the-top' %}
{% endunless %}
{% comment %}
powered by https://supershopify.online/
{% endcomment %}
注意: 使用以上代码，就不会出现在网站首页
以下为旧版样式，可替换上述第一步中的代码，也可忽略
{% 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>
{% comment %}
powered by https://supershopify.online/
{% endcomment %}