Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

Animacja przewijania strony do góry po kliknięciu przycisku

Na wielu stronach internetowych można znaleźć w prawym dolnym rogu przycisk ze „strzałką do góry” po kliknięciu którego jesteśmy przenoszeni na górę strony WWW. Tego typu rozwiązanie szczególnie sprawdza się na witrynach gdzie na jednej stronie prezentowanych jest bardzo dużo informacji.

Fot: lmonk72, CC0 Public Domain.

Fot: lmonk72, CC0 Public Domain.

Wykonanie tego typu animacji przy użyciu biblioteki jQuery jest bardzo proste. W tym artykule przyjrzymy się krok po kroku jak to zrobić.

Na początku musimy sobie przygotować obrazek strzałki, po kliknięciu którego będziemy przenoszeni na początek strony WWW. Ja skorzystam z poniższej ikony (jest ona dostępna za darmo do użytku komercyjnego – www.iconfinder.com/icons/183184/arrow_circle_up_icon):

1429391284_519559-055_CircledArrowUp-64

Po znalezieniu odpowiedniego obrazka możemy przystąpić do kodowania. Na początku otwieramy w dowolnym edytorze tekstu szablon HTML, strony do której chcemy dodać animację przewijania.

Teraz gdzieś na końcu pliku, najlepiej przed znacznikiem <footer> </footer>, umieszczamy poniższy kod HTML:

Następnie przystępujemy do edycji stylów CSS. Będziemy potrzebowali tutaj zdefiniować style dla klasy .scrollTopButton oraz klasy .show, która będzie odpowiedzialna za wyświetlanie bądź ukrywaniem naszej strzałki – nie ma przecież sensu wyświetlać jej w momencie kiedy strona jest przewinięta do samej góry.

Klasa .scrollTopButton:

Pamiętajcie tutaj o poprawnej ścieżce dostępu do obrazka.

Klasa .show:

Ostatnim krokiem jest napisanie skryptu JavaScript z wykorzystaniem biblioteki jQuery. Ważne jest tutaj aby wcześniej dołączyć w sekcji head odpowiedni plik do obsługi biblioteki jQuery:

Teraz możemy przystąpić do pisania naszego skryptu:

Jak widać, nie ma tutaj nic trudnego. Na początku sprawdzamy czy strona jest przewinięta do samej góry bądź też nie, a po kliknięciu w naszą ikonkę uruchamiamy funkcję scrollTop oraz animate.

Demo

>> Demo przewijania strony do góry po kliknięciu przycisku <<

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , , , , , ,

Dodaj komentarz

guest
7 Komentarzy
Najstarsze
Najnowsze Najlepiej oceniane
Inline Feedbacks
View all comments
Marek
Marek
11 lutego 2016 23:33

nie działa mi w firefoxie w chromie działa ktoś podpowie?

lukas124
12 lutego 2016 10:52
Reply to  Marek

Mi na firefoxie działa, masz jakieś błędy w konsoli?

Marek
Marek
14 lutego 2016 22:13
Reply to  lukas124

Demo też mi działa… chyba że coś się gryzie z innymi skryptami wciąż szukam błędu dodawałem jedynie opacity: 0.1; oraz filter: alpha(opacity=10); ale jak usuwałem to z kodu to też nie pomogło

lukas124
14 lutego 2016 23:40
Reply to  Marek

Mój kod jest więc poprawny ;) zerknij do konsoli na błędy – może pomoże ;)

Marek
Marek
18 lutego 2016 23:08
Reply to  lukas124

właśnie nie wyskakuje mi błąd, albo jestem za bardzo początkujący żeby to wyłapać :) jak znajdę przyczynę dam znać

Daniel
Daniel
8 stycznia 2021 20:34

Mam pytanko, a jak zrobić żeby przycisk nie pokazywał się na rozdzielczości telefonu, przyjmijmy że do 600px. Da radę?

Pin It on Pinterest