Budujesz piękną stronę w Elementor i zastanawiasz się jak dodać ten popularny i przydatny przycisk “Przewiń do góry”? To nic trudnego! W kilku krokach pokażę Ci jak zrobisz go samodzielnie. Łatwo, szybko i za darmo. Scroll to top w Elementor. Zaczynamy!

Scroll to top w Elementor

Przycisk “Scroll to top” czyli na “Przewiń do góry” to nic innego jak pływający w narożniku ekranu przycisk pozwalający użytkownikowi szybko wrócić na początek oglądanej strony. Bez żmudnego kręcenia kółkiem myszy lub przewijania palcem po ekranie.

Pierwsze co musisz zrobić to wybrać dla przycisku odpowiednie miejsce. Chodzi o taki element witryny, który pojawia się zawsze na każdej podstronie. Są nimi najczęściej dwa: pasek menu u góry ekranu oraz stopka. Co prawda przycisk “Przewiń do góry” występuje najczęściej w prawym dolnym rogu ekranu, ale skoro jest zawsze do niego “przyklejony” to tak naprawdę nie ma znaczenia, czy umieścisz go w górnej belce czy w stopce.

Dla jakiegoś ogólnego porządku sam zawsze zamieszczam przycisk w stopce. Zabierzmy się więc do pracy. Zakładam, że wiesz już jak tworzyć globalny szablon stopki w Elementor. 

Krok 1

Jeśli posiadasz wersję Elementor Pro, to sprawa jest jasna – tworzysz szablon stopki w zakładce Szablony -> Zapisane szablony -> Dodaj nowy lub edytujesz już zaprojektowaną stopkę.

Co zrobić, jeśli nie masz płatnej wersji Elementor tylko darmową, która nie ma możliwości budowy menu i stopki? To proste – zainstaluj wtyczkę Elementor Header & Footer Builder. 

Przejdź do edycji stopki.

Krok 2

Dodaj nowy przycisk w dowolnym miejscu stopki i dostosuj do własnych upodobań (kolor, kształt, ikona). Przykład mojego przycisku widzisz na początku wpisu. Ja wybrałem strzałkę w górę. Co ważne, jako odnośnik przycisku wpisz “#top” tak jak na obrazku poniżej.

Krok 3

Przejdź do widoku “Zaawansowane” tego przycisku i na karcie “Układ” wybierz pozycję “Określone” tak jak na obrazku poniżej. Ustaw orientację poziomą do prawej strony i orientację pionową do dołu strony. Nie zapomnij o przesunięciu, czyli odstępie od brzegów ekranu. 

Pamiętaj też ustawić z-index na taki, który zagwarantuje Ci, że przycisk będzie zawsze na wierzchu ponieważ nie chcesz, aby bywał przysłonięty przez inne elementy strony.

Krok 4

Dodaj nowy widżet HTML w dowolnym miejscu stopki – to w nim zadzieje się magia przewijania.

Krok 5

Wklej poniższy kod.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $("a[href='#top']").click(function() {   $("html, body").animate({ scrollTop: 0 }, "slow");   return false; });
</script>

Co robią powyższe skrypty? Pierwszy z nich ładuje bibliotekę jQuery na froncie strony, aby upewnić się, że przeglądarka użytkownika będzie rozumiała polecenie. Drugi skrypt “nasłuchuje” kliknięcia w odnośnik “#top” który zdefiniowałeś w przycisku i przewija stronę do góry po jego kliknięciu.

Krok 6

Zapisz zmiany i przejdź na podgląd strony aby w rezultacie zobaczyć działanie Twojego nowego przycisku. 

Przewiń do góry – to takie proste!

Prawda, że proste? 15 minut roboty i gotowe. W kolejnym wpisie pokażę Ci, jak sprawić, aby Twój przycisk pojawiał się dopiero po przewinięciu strony o określoną wysokość. Innymi słowy, nie będzie widoczny od razu po załadowaniu się strony. Dlatego warto zajrzeć na Wyklikane ponownie! Jeśli masz jakieś pytania lub problemy dotyczące tego wpisu, zostaw je w komentarzu pod spodem. Na pewno odpiszę!