Blog Detail

{% comment %}

    Reduce the 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 the 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>