Skip to content

20210519 更新样式: Shopify Back to the top 点击返回到顶部按钮

20210519 更新样式 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 步 < | | | | > 1、创建 Snippet back-to-the-top.liquid

{% comment %}
修改 ‘300’ 来决定客户需要滚动多远才显示按钮:
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}
{% comment %}
修改 ‘em’ 前的数字来更改按钮距离浏览器底部的距离:
{% endcomment %}
{% assign position_from_bottom = '4em' %}
<a href="#" title="Back to the top" class="back-to-top">
<span>Back to the top</span> <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: 0px;
text-decoration: none;
color: #999;
background-color: #eee;
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>

2、在 Layout 文件夹,打开 theme.liquid

在 </body> 标签之前,加上以下代码:

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

 

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

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

上一篇文稿 三步教你免费开启 PayPal 信用卡支付
下一篇文稿 两步让你拥有一个更靓的 FAQ Page 模板