Płynne przewijanie strony – smooth-behavior: scroll


2 października 2020 / Michał Kortas


To już kolejne odświeżenie tematu płynnego przewijania strony. Wcześniejsze dwie wersje jednego z bardziej popularnych wpisów na blogu opierały się na JavaScript. Lata minęły i można już śmiało użyć w tym celu możliwości czystego CSSa. Co prawda, nie wszędzie poniższy przykład zadziała, jednak pomijanie Internet Explorera stało się wreszcie upragnionym standardem ;-)

Cały czas można wesprzeć się awaryjnie JavaScriptem, ten temat zwięźle opisał u siebie WebKrytyk.

Jeśli koniecznie chcesz dotrzeć do archiwalnych wersji tego wpisu z lat 2011 i 2017, odkop je na web.archive.org.

TL;DR

Po prostu użyj:

A poniżej przykład działania
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 domyślnie 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. Po prostu dodaj do swojego arkusza CSS następujący kod:

Działanie „smooth scrolling” w praktyce

Płynne przewijanie strony - smooth scrolling

Płynne przewijanie strony – smooth scrolling


Tagi:


55 odpowiedzi na “Płynne przewijanie strony – smooth-behavior: scroll”

  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!

  26. Devix pisze:

    Trochę się uprościło :-)

  27. Miki pisze:

    Działa ale gdy mam guzik na stronie powrotu do góry i klikam go to jakby się z tym kłóci i reaguje dopiero po chwili. Jest jakieś rozwiązanie?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.