博客

    我们大多数店铺的页面一般内容比较多，尤其是首页和在手机端展示的页面，所以很多付费主题会有自带一个回到顶部的功能。当用户页面滑到最下面的时候，点击回到顶部按钮，可以直接回到页面顶部导航栏处，优化用户体验。

    对于这个功能，官方也给出了一个示例，大家可以按照下面的操作，给自己的店铺也加上这个小功能。最终完成的效果图如下：

    点击Online Store -> Themes -> Actions -> Edit Code -> Snippets，点击Add new snippet，创建back-to-top.liquid文件。

    将下面的代码复制黏贴到刚刚创建好的文件中。

{% 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.

    在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

▼更多精彩推荐，请关注我们▼

专业的技术服务