You are currently viewing How To Add Back To Top Button to Scroll From Bottom On Shopify

How To Add Back To Top Button to Scroll From Bottom On Shopify

How to Add Back to Top Button by following below steps:

1. Create new snippet by following below instructions.

  1. Find the theme you want to edit, and then click Actions > Edit code.
  2. In the Snippets directory, click Add a new snippet.
  3. Name your snippet back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.
  4. Paste the following code into your newly created back-to-the-top file:

2. Paste below code in the snipped back-to-top

{% comment %}
    Reduce below value if you need the back to the top button to appear higher up on the page.
    That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide"> <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: 0px;
text-decoration: none;
color: #999;
background-color: #eee;
font-size: 16px;
padding: 0.3em;
-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;
}
.hide {
display: none!important;
}
</style>
<script>
(function() {
function trackScroll() {
    var scrolled = window.pageYOffset;
    var coords = {{ vertical_offset_for_trigger }};

    if (scrolled > coords) {
    goTopBtn.classList.remove('hide');
    }
    if (scrolled < coords) {
    goTopBtn.classList.add('hide');
    }
}

function backToTop() {
    if (window.pageYOffset > 0) {
    window.scrollBy(0, -80);
    setTimeout(backToTop, 0);
    }
}

var goTopBtn = document.querySelector('.back-to-top');

window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();
</script> 

3. Include snippet in theme just above the closing tag of body

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

Try Shopify free for 14 days

Leave a Reply