W bardzo popularnych modelach stron one-page (czyli takich gdzie cała treść znajduje się na jednej stronie, nie występują podstrony) często po kliknięciu odnośnika widzimy płynne przewijanie strony aż do odpowiedniej sekcji. W tym wpisie napiszemy w jQuery kod, który taką animację za nas przeprowadzi.

Struktura HTML:

Wewnątrz <body> dodajmy:

<div>
   <a href="#middle" id="top">Na dół!</a>
</div>

<div>
   <a href="#bottom" id="middle">Na dół!</a>
</div>

<div>
   <a href="#top" id="bottom">Do góry!</a>
</div>

Mamy trzy divy, w każdym po jednym odnośniku. Możemy już tutaj zauważyć, że każdy odnośnik posiada atrybut href  ustawiony na id odnośnika, do którego prowadzi oraz id. Czyli jeśli klikniemy na link o href  równym top to strona zostanie przewinięta do odnośnika o id top.

Przed zamykającym znacznikiem </body> podłączmy bibliotekę jQuery oraz dodajmy znacznik <script>, w którym później dodamy kod przewijający stronę.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    
<script>
    $(document).ready(function() {
        	    
    });
</script>

Style CSS:

a {
	font-size: 30px;
	color: #CCCCCC;
	font-family: sans-serif;
	text-align: center;
	text-decoration: none;
	padding: 20px;
	display: block;
	background: none;
}

div {
	width: 100%;
 	height:100vh;
}

div:nth-child(1) {
 	background: url(../images/bg1.jpg) no-repeat center;
	background-size: cover;	
}

div:nth-child(2) {
 	background: url(../images/bg2.jpg) no-repeat center;
 	background-size: cover;
}

div:nth-child(3) {
 	background: url(../images/bg3.jpg) no-repeat center;
 	background-size: cover;	
}

Pierwsza reguła nadaje odnośnikom wyświetlanie blokowe, brak tła oraz kilka drobnych zmian wyglądu.

Wszystkim kontenerom div nadaje szerokość równą 100% oraz wysokość równą 100vh. Nadanie dowolnemu kontenerowi wysokości równej 100vh powoduje że będzie miał wysokość równą wysokości okna przeglądarki – warto zapamiętać 🙂

Następne reguły nadają kolejnym divom tło obrazkowe dopasowujące się okna przeglądarki.

Kod jQuery:

Taki kod powinien znajdować się w znaczniku <script> przed zakończeniem </head>.

$(document).ready(function() { 

	$('a[href^="#"]').on('click', function(event) {
	
		var target = $( $(this).attr('href') );
	
		if( target.length ) {
			event.preventDefault();
			$('html, body').animate({
				scrollTop: target.offset().top
			}, 1000);
		}
	});

});

W trzeciej linijce odwołujemy się do wszystkich linków które w atrybucie href posiadają znak # i ustawiamy metodą .on kod, który wykona się po kliknięciu na taki element.

Na samym początku do zmiennej target zostanie przypisany element od id równym atrybutowi href klikniętego odnośnika, czyli jeśli klikniemy na link o href  równym top to odwołamy się do elementu o id top.

Poniżej w instrukcji if sprawdzamy czy długość zmienna target przechowuje jakąś wartość. Jeśli tak to przy pomocy event.preventDefault() wyłączamy domyślne działanie odnośnika. Jeśli tego nie zrobimy to przewijanie nie będzie tak płynne ponieważ wykonane zostanie również domyślne działanie – natychmiastowy przeskok do elementu.

Poniżej metodą .animate wywołaną na elementach html oraz body przewijamy stronę przy pomocy scrollTop do elementu o danym id. Ustawiamy długość animacji na 1000 milisekund – 1 sekundę.

Teraz wystarczy w atrybucie dowolnego odnośnika na stronie wpisać znak # oraz id dowolnego elementu, do którego chcemy się odnieść.

Pozdrawiam 🙂

Przerabiany przykład znajduje się pod tym linkiem.

  • Łukasz Kędra

    powinno być pomiędzy inaczej nie działa

  • мαѕтєяяѕкι

    Mógłby ktoś mi wyjaśnić jak zrobić „przyczepiony” text do strony? na przykład przewija się stronę i dany tekst rusza się wraz z oknem.

  • anka

    Witam Dopiero zaczynam przygodę z JQuery i mam pewny problem. Chciałbym robić takie efekt: mam dosyć spory nagłówek i górne menu i po kliknięciu chciałbym, żeby podstrona, która się otworzy przesunęła się i była dla mnie widoczna, czyli nagłówek i menu, żeby przesunał się wyżej i schował, a później był widoczny po przesunięciu scrollem. Jakaś rada dla mnie? Pozdrawiam

  • anka

    Witam Dopiero zaczynam przygodę z JQuery i mam pewny problem. Chciałbym robić takie efekt: mam dosyć spory nagłówek i górne menu i po kliknięciu chciałbym, żeby podstrona, która się otworzy przesunęła się i była dla mnie widoczna, czyli nagłówek i menu, żeby przesunał się wyżej i schował, a później był widoczny po przesunięciu scrollem. Jakaś rada dla mnie? Pozdrawiam

  • Henio

    Zjadło mi wyrazy. Powinno być:nie powinien znajdować się przed zakończeniem head , a przed zakończeniem body.

  • Henio

    Dziękuję! Bardzo dobra strona, dobrze wyjaśniająca działanie efektów na stronach. Ląduje w ulubionych.
    Tutaj chyba się wkradł błąd. nie powinien znajdować się przed zakończeniem , a przed zakończeniem .