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.

Eksempel på “Tilbage til toppen”

Opret et kodestykke for “tilbage til toppen”

  1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

  2. Navngiv kodestykket back-to-the-top, og klik derefter på Opret kodestykke. Din kodestykkefil åbnes i kodeeditoren.

  3. 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>
  1. Klik på Gem.

Inkluder dit kodestykke

  1. Åbn theme.liquid-filen i mappen Layouts.

  2. Rul ned til bunden af filen. Indsæt denne kode lige over det afsluttende </body>-tag:

{% render 'back-to-the-top' %}
Your code should look like this:

![Back to top include snippet](/manual/customize/back-to-top-include-snippet.png)]
  1. 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.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis