Takaisin alkuun vievän back-to-the-top‑koodinpätkän luominen
Tietokone
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
Anna koodinpätkäsi nimeksi back-to-the-top ja valitse sitten Luo koodinpätkä. Koodinpätkätiedostosi avautuu koodieditorissa.
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' %}
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
Anna koodinpätkäsi nimeksi back-to-the-top ja valitse sitten Luo koodinpätkä. Koodinpätkätiedostosi avautuu koodieditorissa.
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' %}
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
Anna koodinpätkäsi nimeksi back-to-the-top ja valitse sitten Luo koodinpätkä. Koodinpätkätiedostosi avautuu koodieditorissa.
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' %}
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>
Klikkaa Tallenna.
Koodinpätkän sisällyttäminen
Avaa Asettelut-kansiossa theme.liquid-tiedosto.
Vieritä tiedoston alareunaan. Liitä tämä koodi heti </body>-lopputunnisteen yläpuolelle:
{% render 'back-to-the-top' %}
Koodisi pitäisi näyttää tältä:
Klikkaa 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 %}
Demokauppa
Vieraile demokaupassa nähdäksesi esimerkin tästä mukautuksesta.
