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 <<

, , , , , , , ,

  • Marek

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

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

      • Marek

        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

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

          • Marek

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