Płynne przewijanie strony – smooth scrolling


14 kwietnia 2017 / Michał Kortas


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.

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

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.

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:


52 odpowiedzi na “Płynne przewijanie strony – smooth scrolling”

  1. Marcin J. pisze:

    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.

  2. Szpak pisze:

    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

  3. voytas pisze:

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

  4. ryko pisze:

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

  5. boxfox pisze:

    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

  6. miszcz figofago pisze:

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

  7. Ronio pisze:

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

  8. hati pisze:

    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ź?

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

      • hati pisze:

        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…

  9. Reynevan pisze:

    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?

    • Dex pisze:

      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

      • hauerpower pisze:

        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’});

  10. jak zmienić szybkość przewijania?

  11. Bartosz pisze:

    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?

  12. tom pisze:

    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?

  13. Antek pisze:

    Super wszystko działa ;) Polecam

  14. Artur pisze:

    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.

  15. patryk siuta pisze:

    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”

  16. sławomir pisze:

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

  17. Hubert pisze:

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

  18. lolek pisze:

    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?;/

  19. Arwell pisze:

    Wszystko ładnie działa. Dzieki ;)

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

  21. Inos pisze:

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

  22. rozzi pisze:

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

    • Aneta pisze:

      Też miałam ten problem. Wystarczyło zmienić w script część $(‚body’).animate({
      na $(‚body,html’).animate({
      Mi śmiga, pozdrawiam i dziękuję autorowi bloga za wpis, przydatna sprawa :)

      • Stanisław pisze:

        Dzięki Twoja podpowiedź była pomocna. wreszcie działa. Pozdrawiam.

  23. Michał pisze:

    Nie działa w Chrome 61. Ogólnie widzę, że sporo w tym błędów, może warto wprowadzić poprawki do demo? :)

  24. Piotr pisze:

    Kod działa, moja strona przewija się płynnie. Dzięki za super artykuł ale..inne znaczniki „a href” przestały działać! Np. odsyłacze <a href="mailto:
    Jakaś podpowiedź?

    • To powinno zadziałać.
      $(document).on(‚click’, ‚a[href^=”#”]’, function (event) {
      event.preventDefault();

      $(‚html, body’).animate({
      scrollTop: $($.attr(this, ‚href’)).offset().top
      }, 800);
      });

  25. Michał pisze:

    Bardzo przydatne rozwiązanie, które często dopełnia efektu wizualnego danej strony. Obserwuje tego bloga i bardzo chętnie czytam kolejne wpisy! Pozdrawiam!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *