我们大多数店铺的页面一般内容比较多，尤其是首页和在手机端展示的页面，所以很多付费主题会有自带一个回到顶部的功能。当用户页面滑到最下面的时候，点击回到顶部按钮，可以直接回到页面顶部导航栏处，优化用户体验。
对于这个功能，官方也给出了一个示例，大家可以按照下面的操作，给自己的店铺也加上这个小功能。最终完成的效果图如下：
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技术服务