Tilføj knappen Tilbage til toppen på lange sider

Hvis du har lange sider, der kræver megen rulning, kan du føje knappen Tilbage til toppen til dit tema.

På denne side

Opret et kodestykke for “tilbage til toppen”

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
Klik på Opret et nyt kodestykke i mappen Kodestykker.
Navngiv kodestykket back-to-the-top, og klik derefter på Opret kodestykke. Din kodestykkefil åbnes i kodeeditoren.
Indsæt følgende kode i din nye back-to-the-top-fil:

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

Klik på Gem.

Inkluder dit kodestykke

Åbn theme.liquid-filen i mappen Layouts.
Rul ned til bunden af filen. Indsæt denne kode lige over det afsluttende </body>-tag:

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

Din kode bør se således ud:

Inkluder kodestykke for “tilbage til toppen”

Klik på Gem.

Konfigurer knappen “Tilbage til toppen” (valgfrit)

Hvis du vil tilpasse knappen Tilbage til toppen, skal du klikke her og se nærmere på de første linjer i dit kodestykke.

Hvis du vil ændre placeringen af knappen i forhold til bunden af browseren, skal du redigere position_from_bottom-værdien:

{% assign position_from_bottom = '4em' %}

Hvis du vil ændre, hvor langt dine kunder skal rulle ned, før knappen vises, skal du redigere vertical_offset_for_trigger-værdien:

{% assign vertical_offset_for_trigger = 300 %}

Demobutik

Besøg demobutikken for at se et eksempel på denne tilpasning.