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.

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:

<span class="scrollTopButton"></span>

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:

.scrollTopButton {
     width: 64px;
     height: 64px;
     position: fixed;
     visibility: hidden;
     overflow: hidden;
     z-index: 99999999;
     background-image: url('images/arrow-top.png');
     right: 30px;
     bottom: 30px;
     transition: all 0.5s ease-in-out;
}

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

Klasa .show:

.scrollTopButton.show {
     visibility: visible;
     cursor: pointer;
     transition: all 0.5s ease-in-out;
}

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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

$(function(){
 
	$(window).scroll(function() {
		if ($(window).scrollTop() > 100) {
			$('.scrollTopButton').addClass('show');
		} else {
			$('.scrollTopButton').removeClass('show');
		}
	});
 
	$('.scrollTopButton').click(function() {
		$('body').animate({scrollTop: 0}, 400, 'linear');
	});
});

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

Komentarze (9)

  • Marek pisze:

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

    • lukas124 pisze:

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

      • Marek pisze:

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

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

      • Marek pisze:

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

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

    • Łukasz Dudziński pisze:

      Hej Daniel, jest to możliwe. Aby osiągnąć taki efekt dodaj poniższy kod css do swoich stylów:

      @media only screen and (max-width: 600px) {
      .scrollTopButton {
      display: none;
      }
      }

  • Paulo pisze:

    Skrypt i funkcja ciekawa i przydatna. U mnie prawie działa – po przewinięciu strony w dół pojawia się ikona strzałki, ale po jej kliknięciu nie przewija strony w górę :(
    Nie wiem tylko dlaczego skoro cały kod skopiowałem bez jego zmieniania.

Odpowiedz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest