Skrypt 4: Płynne przewijanie do sekcji strony

Teoria

Zamiast natychmiastowego "skoku" do sekcji strony po kliknięciu linku (domyślne zachowanie HTML), strona płynnie przewija się do celu — częsty efekt w nowoczesnych stronach jednostronicowych (landing page).

Kod (JavaScript)

<nav>
    <a href="#sekcja1">Przejdź do sekcji 1</a>
    <a href="#sekcja2">Przejdź do sekcji 2</a>
</nav>

<script>
    const linki = document.querySelectorAll('a[href^="#"]');

    for (const link of linki) {
        link.addEventListener("click", function (event) {
            event.preventDefault(); // zablokuj domyślny, natychmiastowy skok
            const idCelu = link.getAttribute("href");
            document.querySelector(idCelu).scrollIntoView({ behavior: "smooth" });
        });
    }
</script>

Komentarz i wyjaśnienie kodu

Selektor CSS a[href^="#"] wybiera wszystkie linki, których atrybut href ZACZYNA SIĘ od # (czyli linki do sekcji tej samej strony). scrollIntoView({ behavior: "smooth" }) to wbudowana metoda DOM przewijająca stronę płynnie do wskazanego elementu, bez potrzeby ręcznego liczenia pikseli.

Typowe błędy

Zapomnienie event.preventDefault() sprawia, że strona najpierw "skoczy" natychmiastowo (domyślne zachowanie), a dopiero potem (zbędnie) spróbuje przewinąć się płynnie.