All Tutorials

Add a back to top button on long pages

All Tutorials

Add a back to top button on long pages

Add a back to top button on long pages

If you have pages that are long and require a lot of scrolling, you can add a Back to the top button to your theme.

Create a back-to-the-top snippet

  1. In the Snippets directory, click Add a new snippet.

  2. Name your snippet back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.

  3. Paste the following code into your newly created back-to-the-top file:

        {% 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">
        <span>Back to the top</span> <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>
  4. Click Save.

Include your snippet

  1. In the Layouts folder, open the theme.liquid file.

  2. Scroll to the bottom of the file. Right above the closing </body> tag, paste this code:

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

    Your code should look like this:

  3. Click Save.

Configure the back to the top button (optional)

To customize your back to the top button, click here and look at the first lines of your snippet.

  • To change the position of your button relative to the bottom of the browser, edit the position_from_bottom value:
{% assign position_from_bottom = '4em' %}
  • To change how far down a customer needs to scroll before the button is revealed, edit the vertical_offset_for_trigger value:
{% assign vertical_offset_for_trigger = 300 %}

Demo store

Have a look at the demo store.