Voeg een knop Terug naar boven toe op lange pagina's

Als je pagina's hebt die lang zijn en waar veel gescrold moet worden, kun je een knop Terug naar boven aan je thema toevoegen.

Voorbeeld van Terug naar boven

Maak een fragment Terug naar boven aan

Desktop
  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
  4. Noem je fragment back-to-the-top en klik vervolgens op Fragment aanmaken. Je fragmentbestand wordt geopend in de code-editor.
  5. Plak de volgende code in je zojuist aangemaakte back-to-the-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">
  <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 op Opslaan.
iPhone
  1. Tik in de Shopify-app op de knop .
  2. Tik in het gedeelte Verkoopkanalen op webshop.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  5. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
  6. Noem je fragment back-to-the-top en klik vervolgens op Fragment aanmaken. Je fragmentbestand wordt geopend in de code-editor.
  7. Plak de volgende code in je zojuist aangemaakte back-to-the-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">
  <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 op Opslaan.
Android
  1. Tik in de Shopify-app op de knop .
  2. Tik in het gedeelte Verkoopkanalen op webshop.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  5. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
  6. Noem je fragment back-to-the-top en klik vervolgens op Fragment aanmaken. Je fragmentbestand wordt geopend in de code-editor.
  7. Plak de volgende code in je zojuist aangemaakte back-to-the-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">
  <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 op Opslaan.

Voeg je fragment toe

  1. Open in de map Opmaak het theme.liquid-bestand.
  2. Blader naar de onderkant van het bestand. Plak deze code boven </body> de laatste tag:
{% render 'back-to-the-top' %}

Je code ziet er als volgende uit:

Terug naar boven inclusief fragment

  1. Klik op Opslaan.

Configureer de knop Terug naar boven (optioneel)

Om je knop Terug naar boven aan te passen, klik je hier en bekijk je de eerste regels van je fragment.

  • Bewerk de waarde position_from_bottom om de positie van je knop ten opzichte van de onderkant van de browser te wijzigen:
{% assign position_from_bottom = '4em' %}
  • Bewerk de vertical_offset_for_trigger-waarde als je wilt wijzigen hoe ver naar beneden een klant moet scrollen voordat de knop wordt getoond:
{% assign vertical_offset_for_trigger = 300 %}

Demowinkel

Ga naar de demowinkel om een voorbeeld van deze aanpassing te bekijken.

Zat het antwoord dat je zocht er niet bij? Wij helpen je graag verder.