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

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ź ukrywanie 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() {
		$('html, 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 <<

JavaScript, jQuery