我们大多数店铺的页面一般内容比较多,尤其是首页和在手机端展示的页面,所以很多付费主题会有自带一个回到顶部的功能。当用户页面滑到最下面的时候,点击回到顶部按钮,可以直接回到页面顶部导航栏处,优化用户体验。
对于这个功能,官方也给出了一个示例,大家可以按照下面的操作,给自己的店铺也加上这个小功能。最终完成的效果图如下:
01
点击Online Store -> Themes -> Actions -> Edit Code -> Snippets,点击Add new snippet,创建back-to-top.liquid文件。
02
将下面的代码复制黏贴到刚刚创建好的文件中。
{% assign vertical_offset_for_trigger = 300 %}
{% assign position_from_bottom = ‘2em’ %}
<a href=”#” title=”Back to the top” class=”back-to-top”>
<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: 6px;
text-decoration: none;
color: #999;
font-size: 20px;
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>
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>
第一行中的300代表当页面往下滑动的距离达到300px时,才会出现回到顶部按钮。如果想调整这个距离,可以调整数字,不需要带后面的单位。
第二行中的2em指按钮与屏幕底部的距离。如果想调整这个距离,可以修改数字即可,数字后面需要带上em.
03
在Layout中点击theme.liquid,在页面底部</body>上面一行增加 {% include ‘back-to-top’ %},如下图:
根据上面的步骤添加完毕之后点击保存,刷新前台页面,往下滑动鼠标就能看到这个按钮了,点击之后就能回到顶部。

小编的公众号从第一篇文章,到今天差不多刚好是半年的时间。非常感谢大家在这半年的时间里面对小编以及SFS的支持,我们也一直秉承给客户最好的Shopify技术服务的理念。除了通过文字的传达,我们也想与大家来一场线下的面对面的更深入的交流。
因此,我们将于3.28日(本周四)下午一点半在深圳举办SFS第一期Shopify实战卖家线下沙龙,现场邀请了多位大咖分享实战经验,期待您的参与。本次沙龙活动免费制,如果需要参加会后卖家私享交流聚餐可以购买VIP票种。
报名链接:https://www.hdb.com/party/7ntsn.html。
点击文章底部阅读原文即可立即报名。

本篇文章就分享到这里了。如果对文中所涉及内容有疑问处,可联系小编QQ : 2790641050。欢迎加入免费Shopify技术交流qq群:632205694,如有疑问,也可在群中与小编实时交流。
如果觉得小编的文章对你有价值,动动你的手指,帮忙关注并转发,谢谢!

除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢!
SFS为国内首家专注于Shopify技术服务的供应商,因为专注,所以专业。
我们的网站:https://app.shopifyfs.com
商务合作: bd@sfsup.com


本篇文章来源于微信公众号: shopify技术服务