0Pricing
CSS Academy · Lekcja

scroll-behavior: smooth

Nauczy się Pan/Pani włączać płynne przewijanie dla linków kotwic i przewijania programowego za pomocą scroll-behavior.

scroll-behavior: smooth to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym jest scroll-behavior?

scroll-behavior określa, czy przewijanie wywołane przez nawigację (łącza kotwic, JavaScriptowe scrollTo()) ma być płynnie animowane, czy ma nastąpić natychmiastowe przeskoczenie.

scroll-behavior: smooth

Ustawienie scroll-behavior: smooth na elemencie html lub body sprawia, że nawigacja do wszystkich kotwic na stronie jest płynnie animowana:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Natychmiastowe i płynne przewijanie

Wartości:

  • auto (wartość domyślna): natychmiastowe przeskoczenie
  • smooth: animowane przewinięcie do celu

Nawigacja za pomocą łączy kotwic

Po włączeniu płynnego przewijania kliknięcie łącza takiego jak <a href="#contact"> płynnie przewija do elementu z id="contact" zamiast natychmiast do niego przeskakiwać.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

JavaScriptowe scrollTo() z płynnym przewijaniem

Przekaż behavior: "smooth" do metod przewijania JavaScriptu, aby uzyskać animowane przewijanie:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

Interakcja z prefers-reduced-motion

Płynne przewijanie może wywoływać chorobę lokomocyjną. Zawsze wyłączaj je dla użytkowników, którzy preferują ograniczenie ruchu:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

scroll-behavior na kontenerach

Stosuj tę właściwość do dowolnego przewijalnego kontenera, nie tylko do całej strony:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Ograniczenia

CSS-owe scroll-behavior nie zapewnia kontroli nad czasem trwania przewijania ani funkcją wygładzania. Aby precyzyjnie sterować animacją, użyj JavaScriptowego Web Animations API lub bibliotek takich jak GSAP wraz z ich wtyczkami do przewijania.

scroll-padding-top dla stałych nagłówków

Gdy stały nagłówek zasłania cele kotwic, scroll-padding-top dodaje przesunięcie, dzięki czemu cel nie jest ukryty za nagłówkiem:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin a scroll-padding

scroll-margin dodaje przesunięcie bezpośrednio do elementu docelowego, a scroll-padding dodaje je do kontenera przewijania. Obie właściwości rozwiązują problem stałego nagłówka:

  <div class="section">Section content</div>

Uwaga dotycząca dostępności

Płynne przewijanie poprawia wygodę korzystania z interfejsu. Zawsze upewnij się, że nawigacja za pomocą kotwic działa również bez niego — nie polegaj na płynnym przewijaniu w kwestiach funkcjonalności, lecz używaj go wyłącznie jako wizualnego udoskonalenia.

Szybkie sprawdzenie

Jak zapewnić wyłączenie płynnej animacji przewijania dla użytkowników z nadwrażliwością przedsionkową na ruch?

Podsumowanie

scroll-behavior: smooth na elemencie html włącza płynne, animowane przewijanie dla łączy kotwic i metod przewijania JavaScriptu. Użyj scroll-padding-top, aby odsunąć cele przewijania od stałych nagłówków. Ze względów dostępności zawsze wyłączaj płynne przewijanie wewnątrz zapytania medialnego prefers-reduced-motion: reduce.

Często zadawane pytania

Czy lekcja „scroll-behavior: smooth” jest bezpłatna?

Tak — pełny tekst „scroll-behavior: smooth” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „scroll-behavior: smooth”?

Nauczy się Pan/Pani włączać płynne przewijanie dla linków kotwic i przewijania programowego za pomocą scroll-behavior. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „scroll-behavior: smooth”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. overflow: hidden, scroll, auto, clip
  2. scroll-behavior: smooth
  3. scroll-snap-type i scroll-snap-align
  4. Stylizowanie pasków przewijania za pomocą ::-webkit-scrollbar
← Powrót do CSS Academy