Płynne przewijanie strony do wskazanego elementu

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.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

Tworzenie gry przeglądarkowej – #10 – Ranking i zakończenie projektu 13 efektownych wtyczek scrollujących jQuery Przewijanie ekranów z wtyczką One Page Scroll
View Comments
  • 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.

  • 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

  • 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

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

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