Dodaj przycisk Powrót do góry na długich stronach
Ta strona została wydrukowana dnia Mar 28, 2024. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-to-top.
Uwaga
Klasyczne szablony nie są dostępne w Sklepie z szablonami. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0 , a darmowe klasyczne szablony Shopify nie są aktualizowane oprócz poprawek bezpieczeństwa.
Uwaga
To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.
W przypadku długich stron wymagających czasochłonnego przewijania możesz dodać przycisk Powrót do góry do swojego szablonu.
Utwórz fragment kodu powrotu do góry
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony .
Znajdź temat, który chcesz edytować, kliknij przycisk ... , aby otworzyć menu czynności, a następnie kliknij Edytuj kod .
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu .
Nazwij swój fragmentu kodu back-to-the-top
, a następnie kliknij opcję Utwórz fragment kodu . Plik fragmentu kodu otworzy się w edytorze kodu.
Wklej następujący kod do nowo utworzonego pliku 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Kliknij opcję Zapisz .
W aplikacji Shopify naciśnij przycisk … .
W sekcji Kanały sprzedaży naciśnij Sklep online .
Naciśnij Zarządzaj szablonami .
Znajdź temat, który chcesz edytować, kliknij przycisk ... , aby otworzyć menu czynności, a następnie kliknij Edytuj kod .
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu .
Nazwij swój fragmentu kodu back-to-the-top
, a następnie kliknij opcję Utwórz fragment kodu . Plik fragmentu kodu otworzy się w edytorze kodu.
Wklej następujący kod do nowo utworzonego pliku 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Kliknij opcję Zapisz .
W aplikacji Shopify naciśnij przycisk … .
W sekcji Kanały sprzedaży naciśnij Sklep online .
Naciśnij Zarządzaj szablonami .
Znajdź temat, który chcesz edytować, kliknij przycisk ... , aby otworzyć menu czynności, a następnie kliknij Edytuj kod .
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu .
Nazwij swój fragmentu kodu back-to-the-top
, a następnie kliknij opcję Utwórz fragment kodu . Plik fragmentu kodu otworzy się w edytorze kodu.
Wklej następujący kod do nowo utworzonego pliku 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Kliknij opcję Zapisz .
Dołącz fragment kodu
W folderze Układy otwórz plik theme.liquid
.
Przewiń do dołu pliku. Bezpośrednio nad tagiem zamykającym </body>
wklej ten kod:
{% render 'back-to-the-top' %}
Twój kod powinien wyglądać tak:
Kliknij opcję Zapisz .
Skonfiguruj przycisk powrotu do góry (opcjonalnie) Aby dostosować przycisk powrotu do góry, kliknij tutaj i sprawdź pierwsze linie fragmentu kodu.
Aby zmienić położenie przycisku względem dołu przeglądarki, edytuj wartość position_from_bottom
:
{% assign position_from_bottom = '4em' %}
Aby zmienić wartość wskazującą, jak daleko w dół klient musi przewinąć, zanim przycisk będzie widoczny, edytuj wartość vertical_offset_for_trigger
:
{% assign vertical_offset_for_trigger = 300 %}
Wskazówka
Wartość vertical_offset_for_trigger
musi być ustawiona bez jednostek i musi to być wartość w pikselach.
Sklep w wersji demonstracyjnej Odwiedź sklep w wersji demonstracyjnej , aby zobaczyć przykład tego dostosowania.