JavaScriptWebdesign & UX

Płynne przewijanie strony – smooth scrolling

Ten krótki, piątkowy wpis poświęciłem na odświeżenie poradnika z przed sześciu lat. Pomimo swojego wieku był jest on jednym z najchętniej czytanych postów na tym blogu, nie mogę go więc tak po prostu zarchiwizować i zapomnieć. Jeśli korzystasz z jQuery w swoim projekcie, śmiało możesz wykorzystać poniższy trik na uzyskanie efektu płynnego przewinięcia do wybranego elementu interfejsu WWW.

Jest to odświeżona wersja wpisu z roku 2011.
Jeśli koniecznie chcesz dotrzeć do wersji archiwalnej, odkop ją na web.archive.org.

TL;DR

A poniżej przykład działania w GIF.
Płynne przewijanie strony - smooth scrolling
Płynne przewijanie strony – smooth scrolling

Jak uzyskać efekt „smooth scrolling”?

Zasada działania jest prosta i wykorzystuje HTMLowe kotwice.

<ul>
	<li><a href="#one">First chapter</a></li>
	<li><a href="#two">Second chapter</a></li>
	<li><a href="#three">Third chapter</a></li>
</ul>

Odnośnik przenosi użytkownika do zdefiniowanego identyfikatorem elementu HTML.

<section id="one">
	<h1>First chapter</h1>
	<article>
		<p>Lorem Ipsum...</p>
	</article>
</section>

Cała akcja odbywa się niestety dość ascetycznie (pewnie się o tym przekonałeś, skoro szukasz ładniejszego rozwiązania). Poniższy kod pomoże uzyskać bardziej płynny efekt przewinięcia.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	$(document).on('click', 'a', function(event){
	    event.preventDefault();
	    $('body').animate({
	        scrollTop: $($.attr(this, 'href')).offset().top
	    }, 800);
	});
</script>

Jeżeli już używasz jQuery, nie ładuj oczywiście ponownie tej biblioteki. Jeśli nie używasz, zastanów się, czy uzyskany w ten sposób efekt nie będzie przerostem formy nad treścią, bo ładowanie jej na potrzeby płynniejszego przewijania, z mojego punkty widzenia, już się pod to zalicza.

Działanie „smooth scrolling” w praktyce

Płynne przewijanie strony - smooth scrolling
Płynne przewijanie strony – smooth scrolling

Odnośniki

Tagi:Daj Się Poznać 2017jquerykotwicepłynne przewijaniesmooth scrolling

komentarzy 46

  • Awatar
    Marcin J.

    7 marca 2012 14:28

    Spoko art! Podoba mi się. Właśnie tego szukałem. Jak wspominasz w arcie oszczędzam mi nim przekopywanie neta szukając odpowiednich rozwiązań. Pozdro.

    Odpowiedz
  • Awatar
    Szpak

    9 maja 2012 19:15

    Niestety ale u mnie to nie zadziałało, skok jest a nie płynne przewinięcie. Instrukcja świetnie napisana, ,wszystko jest proste i jasne lecz coś mi się nie udało

    Odpowiedz
  • Awatar
    voytas

    8 września 2012 18:53

    Mam z tym problem. skrypt wykorzystałem do nawigacji w menu strony…działa ale: po pierwszym kliknięciu skacze do kotwic, drugi raz kliknięcie w ten sam link powoduje płynne przejście do kotwicy. Nie bardzo wiem co jest nie tak….proszę o sugestię.

    Odpowiedz
    • Awatar
      Mr.Mr

      8 września 2012 20:00

      Sugeruję założyć temat na naszym forum.

      Podaj tam kod – może coś pomożemy

      Odpowiedz
  • Awatar
    ryko

    5 listopada 2012 16:50

    wszystko działa bardzo dobrze, ale czy jest możlowość aby strona przewijała sie płynnie w poziomie ?

    Odpowiedz
    • Awatar
      Michał Kortas

      5 listopada 2012 18:01

      Jest możliwe :-) Miałem to nawet kiedyś wykorzystane na moim portfolio. Tyle, że musisz nadać wartość width dla tagu .

      Odpowiedz
      • Awatar
        ryko

        6 listopada 2012 16:14

        mógłbym Cie prosić o więcej informacji, podpowiedzi, może na maila ryko1@tlen.pl ( tak będzie najprościej ) dziękuje z góry. Uratuje to koncepcje mojej www :)

        Odpowiedz
      • Awatar
        Michał Kortas

        6 listopada 2012 23:25

        Zapraszam do utworzenia odpowiedniego wątku na naszym forum. W komentarzach nie rozwiązujemy poszczególnych problemów :-)

        Odpowiedz
      • Awatar
        ryko

        7 listopada 2012 00:55

        Jakbym nie wpisywał i ustawiał, przy rejestracji na forum wyskakuje błąd:

        ReCAPTCHA Text Error.

        ?

        Odpowiedz
      • Awatar
        Michał Kortas

        7 listopada 2012 09:25

        Problem został naprawiony. Można się rejestrować. SSL blokował niektóre funkcje przy rejestracji.

        Odpowiedz
  • Awatar
    boxfox

    31 grudnia 2012 11:40

    Bardzo fajnie to wszystko działa. A czy da się to jakoś zmodyfikować by działało dla podstron? Tj. klikamy w link otwiera się nam nowa podstrona (która jest de facto długa) i tam na niej następuje płynne przewinięcie do danego elementu? Dziękuję za odpowiedź pozdrawiam

    Odpowiedz
    • Awatar
      Michał Kortas

      31 grudnia 2012 14:36

      Zapraszam na nasze forum webmasterskie. Razem poszukamy rozwiązania. Pozdrawiam.

      Odpowiedz
    • Awatar
      ZdzIs

      10 kwietnia 2017 00:08

      Podbijam pytanie , a na forum nie ma śladu po tym temacie

      Odpowiedz
      • Awatar
        Michał Kortas

        10 kwietnia 2017 16:38

        Na dniach zaktualizuję ten wpis do obecnych realiów. Miejmy na uwadze to, że post został opublikowany w 6 lat temu.

        Odpowiedz
  • Awatar
    miszcz figofago

    13 stycznia 2013 23:42

    …skrypt dziala ale jesli masz jakikolwiek inny js na stronie, to najprawdopodobniej przewijanie nie zadziala bo jest tak fatalnie napisane, ze konfliktuje sie z innym badziewiem pisanym w js. Kolega ktory skopiowal skrypt do artykulu napewno mial dobre checi.

    Odpowiedz
  • Awatar
    Ronio

    18 stycznia 2013 21:39

    Stwierdzam że mechanizm nie działa. Próbowałem na wiele sposobów.

    Odpowiedz
  • Awatar
    hati

    9 lipca 2013 08:32

    Dobrze opisane i można spokojnie zastosować, ale o ile działa w FF, to niestety nie dla Chroma i innych przeglądarek. Jakieś rozwiązanie? Jakaś podpowiedź?

    Odpowiedz
    • Awatar
      Michał Kortas

      9 lipca 2013 09:19

      Wpis ma ponad dwa lata, dlatego może być nieaktualny. Dziękuję za informację. Przygotuję coś dostosowanego do obecnych realiów. Pozdrawiam

      Odpowiedz
      • Awatar
        hati

        9 lipca 2013 10:50

        Wpis bardzo fajnie przygotowany :)

        Znalazłam opinię, że Chrom „gubi się” w kwestii Parent. Niestety znalezione porady nie pomogły mi w rozwiązaniu problemu…

        Odpowiedz
  • Awatar
    Reynevan

    14 sierpnia 2013 10:07

    Jest możliwość wykorzystania tego w Joomli 3.0? Próbowałem wrzucić wszystko do index.php w szablonie którego używam, skrypty do folderu z szablonem, no i zainstalowałem jQuery Easy (bo podobno jQuery się gryzie z Mootools), ale bez efektów. Nie da się czy ja coś robię nie tak?

    Odpowiedz
    • Awatar
      Dex

      7 października 2013 21:09

      Cześć, elementy umieszczasz w pliku index.php szablonu a biblioteki umieszczasz w głównym katalogu strony. Oczywiście jeśli nie chcesz zmieniać przekładowej ścieżki

      src=”jquery.scrollTo.js

      Działa na Joomli 3.
      Pozdrawiam

      Odpowiedz
      • Awatar
        hauerpower

        17 listopada 2013 16:21

        czy joomla, drupal czy cokolwiek, nie ma znaczenia kod jest kod i będzie działać odpowiednio umieszczony.

        pod joomlą mogą dojśćkonfilkty skryptów, jednak dzięki za rozwiązanie dodałbym jeszcze do tego easing: np. $.localScroll({duration:500, easing: ‚easeOutExpo’});

        Odpowiedz
  • Awatar
    Maciej Buchert

    11 września 2013 18:23

    jak zmienić szybkość przewijania?

    Odpowiedz
  • Awatar
    Bartosz

    10 października 2013 18:09

    Tego właśnie szukałem. Mam jednak mały problem z umieszczeniem kilku kotwic. Oczywiście każda kolejna ma inną nazwę ID. Odnośnik z menu poprawnie działa jednak tylko do pierwszej kotwicy. Kotwice rozmieszczone są co kilkadziesiąt linijek. Gdy kliknę na drugą strona przejeżdża tylko kilka linijek. W czym może być problem?

    Odpowiedz
  • Awatar
    tom

    19 grudnia 2013 20:07

    Wszystko pięknie działa, tutorial prosty i zrozumiały ale… jak ustawić aby tekst kotwiczony nie był podsunięty do góry strony ale miał dodatkowy margines?

    Odpowiedz
    • Awatar
      Mr.Mr

      19 grudnia 2013 21:41

      Załóż proszę wątek na forum. Przedstaw swój kod i spróbujemy jakoś pomóc.

      Odpowiedz
  • Awatar
    Antek

    18 stycznia 2014 13:59

    Super wszystko działa ;) Polecam

    Odpowiedz
  • Awatar
    Artur

    21 lutego 2014 15:36

    A jak zrobić aby działało to w momencie przejścia ze strony głównej do np. kontakt? Skrypt działa tylko jeżeli jestem na tej samej podstronie i przewinę ją do góry – wówczas po kliknięciu w menu podjedzie do nagłówka strony. Jednak w momencie kiedy chce przeskoczyć na inna podstronę, dana podstrona się ładuje ale już bez efektu i od razu pokazuje nagłówek.

    Odpowiedz
  • Awatar
    patryk siuta

    15 kwietnia 2014 23:24

    Podłączyłem wszystko do strony jak należy, pliki .js na bank są widoczne z poziomu pliku index, jednak po kliknieciu w którąkolwiek kotwicę, konsola wywala mi błąd:

    „TypeError: d.browser is undefined”

    Odpowiedz
    • Awatar
      Mr.Mr

      17 kwietnia 2014 07:31

      Proszę załóz temat na forum – tam zajmujemy się takimi sprawami.

      Odpowiedz
  • Awatar
    sławomir

    26 maja 2014 16:31

    czy możesz pokazać na jakimś przykładzie jak wygląda taka strona z takim rozwiązaniem ?

    Odpowiedz
  • Awatar
    Hubert

    27 lipca 2014 16:24

    witam jak zrobic, zeby sekcja nie przewijala sie do poczatku strony tylko pod menu? hm hm?

    Odpowiedz
  • Awatar
    lolek

    19 października 2014 11:34

    Znalazłem u Ciebie to czego szukałem ale mam problem, strona się nie przewija tylko od razu przeskakuje do wubranego miejsca;/ Tylko czy to działa też do DIVów? Mam menu Odnosnik div1, potem mam diva do którego chce sie odnieść potem mam wklejony kod z funkcji jQuery. Ale nie ma efektu przewijania tylko jest przeskok;/ Czy coś zrobiłem źle?;/

    Odpowiedz
    • Awatar
      Tpk_Games

      28 czerwca 2015 23:29

      Również mam ten problem – chętnie poznam odp na to pytanie :)

      Odpowiedz
      • Awatar
        wooo

        17 lipca 2015 06:44

        Witajcie. Jesli chcecie przewinąć płynnie do wybranego div’a to poprostu tuż nad linia np. dopiszcie

        Odpowiedz
  • Awatar
    Arwell

    17 kwietnia 2015 12:27

    Wszystko ładnie działa. Dzieki ;)

    Odpowiedz
  • Awatar
    Adam Popielarski

    5 października 2015 09:59

    Ale jaja, działa skrycik, prosty i wygodny, nawet dwa w jednym tu są

    Odpowiedz
  • Awatar
    Inos

    20 lutego 2016 19:54

    nie działa pod operą ale pod ff działa… jakieś pomysły?

    Odpowiedz
    • Awatar
      Michał Kortas

      20 lutego 2016 21:12

      Wpis wymaga aktualizacji, od 2011 sporo czasu minęło. Zajmę się tym w nadchodzącym tygodniu.

      Odpowiedz
      • Awatar
        Inos

        28 lutego 2016 23:21

        dziękuję za odpowiedź:-)
        pozdrawiam

        Odpowiedz
  • Awatar
    Kamil

    14 kwietnia 2017 14:10

    Super blog! :)

    Odpowiedz
  • Awatar
    rozzi

    8 maja 2017 19:53

    Nie działa pod ff. Pod edge i chrome bez problemu. Może kolidować z bootstrap data-spy=”scroll”?

    Odpowiedz

Zostaw odpowiedź