Takaisin alkuun ‑painikkeen lisääminen pitkille sivuille

Jos sinulla on sivuja, jotka ovat pitkiä ja vaativat paljon vierittämistä, voit lisätä teemaasi Takaisin alkuun ‑painikkeen.

Esimerkki Takaisin alkuun ‑painikkeesta

Takaisin alkuun vievän back-to-the-top‑koodinpätkän luominen

  1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

  2. Anna koodinpätkäsi nimeksi back-to-the-top ja valitse sitten Luo koodinpätkä. Koodinpätkätiedostosi avautuu koodieditorissa.

  3. Liitä seuraava koodi uuteen, juuri luotuun back-to-the-top-tiedostoosi:

{% 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. Napauta Tallenna.

Koodinpätkän sisällyttäminen

  1. Avaa Asettelut-kansiossa theme.liquid-tiedosto.

  2. Vieritä tiedoston alareunaan. Liitä tämä koodi heti </body>-lopputunnisteen yläpuolelle:

{% 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. Napauta Tallenna.

Takaisin alkuun ‑painikkeen määritys (valinnainen)

Jos haluat mukauttaa Takaisin alkuun ‑painiketta, klikkaa tästä ja katso koodinpätkäsi ensimmäisiä rivejä.

  • Jos haluat muuttaa painikkeen sijaintia suhteessa selaimen alaosaan, muokkaa position_from_bottom-arvoa:
{% assign position_from_bottom = '4em' %}
  • Jos haluat muuttaa sitä, kuinka pitkälle alas asiakkaan on vieritettävä näkymää, ennen kuin painike tulee näkyviin, muokkaa vertical_offset_for_trigger-arvoa:
{% assign vertical_offset_for_trigger = 300 %}

Vinkki: vertical_offset_for_trigger-arvo on määritettävä ilman yksiköitä, ja se on pikseliarvo.

Demokauppa

Vieraile demokaupassa nähdäksesi esimerkin tästä mukautuksesta.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi