Płynne przewijanie witryny do wskazanego punktu – 2 świetne sposoby

Front-end 6 minut czytania

Podczas przeglądania internetu nie sposób ominąć efektu, w którym po kliknięciu w konkretny link nasz widok płynnie przenosi się na sekcję, do której ten odnośnik prowadził. Czy wiesz, że do utworzenia czegoś takiego wystarczy Ci troszkę kodu JavaScript lub nawet jedna właściwość CSSa?

Jeśli nie, to w tym wpisie chciałbym pokazać Ci 2 sposoby na implementację takiego efektu na własnej stronie internetowej. Zapraszam do lektury! 🙂

Sposób 1: Skrypt oparty o bibliotekę jQuery.

Może zanim przejdziemy do właściwego skryptu jQuery, sprawdźmy co musimy zawrzeć w kodzie HTML, aby całość zadziałała. Ten musi posiadać 2 linie podobne do tych:

<a href="#example">Kliknij, aby przejść pod wskazany odnośnik</a>

<span id="example">I oto jesteś!</span>

Jak widać wszystko opiera się na standardowym linku do innej sekcji na stronie, która to posiada własny identyfikator.

Z kolei tak oto prezentuje się funkcja odpowiedzialna za obsługę naszego efektu oraz oczywiście jej wywołanie na końcu:

function scroll(e) {

    var href = $(this).attr('href');

    e.preventDefault();

    $('html, body').animate({
        scrollTop: $(href).offset().top
    }, 800);

    location.hash = href;

};

$('a[href^="#"]').click(scroll);

Może jak zawsze przeanalizujemy ten kod linia po linii:

function scroll(e) {

  var href = $(this).attr('href');

Po deklaracji funkcji scroll z parametrem e (potrzebnym do obsługi zdarzeń w JS), tworzymy zmienną href, która zawrze wartość atrybutu, a jakże: href odnośnika, dla którego nasza funkcja została wywołana.

  e.preventDefault();

Tu za pomocą wbudowanej funkcji preventDefault() usuwamy domyślne zachowanie naszego linku.

  $('html, body').animate({
    scrollTop: $(href).offset().top
  }, 800);

Chyba najważniejszy element omawianego skryptu. Łapiemy elementy html oraz body (potrzebujemy obydwóch, aby efekt działał we wszystkich przeglądarkach) i wykonujemy dla nich funkcję wbudowaną w jQuery o nazwie animate(). Za jej pomocą animujemy zmianę wartości górnego przewinięcia okna przeglądarki (scrollTop) na ilość pikseli od początku witryny do elementu docelowego.

Ten skomplikowany na pierwszy rzut oka opis sprowadza się do tego, że po prostu nasz widok przejeżdża do elementu docelowego. 🙂 Po zamknięciu klamry, w której została umieszczona funkcja wpisujemy długość wykonywania się animacji w milisekundach.

  location.hash = href;

};

Na końcu aktualizujemy adres witryny o identyfikator elementu, do którego przenosił nasz link. Dzięki temu witryna nie straci na dostępności.

Oczywiście samo zadeklarowanie funkcji nic nam nie da, jeśli później jej nie wywołamy:

$('a[href*="#"]').click(scroll);

Stanie się to gdy użytkownik kliknie na jakikolwiek link, w którym znajduje się hashtag.

I tak oto prezentuje się cały cały, działający skrypt, który w każdej chwili możesz użyć na swojej stronie internetowej! 🙂 Poniżej znajduje się działający przykład:

See the Pen Płynne przewijanie do wskazanego punktu – jQuery by Robert Orliński (@ROrlilnski) on CodePen.


Sposób 2: Właściwość scroll-behavior.

Od pewnego czasu przeglądarki zaczynają wspierać bardzo ciekawą właściwość o nazwie scroll-behavior. Prekursorem w tym temacie okazała się Mozilla wraz ze swoim produktem, później do tego grona dołączyli Chrome oraz Opera. Niestety na tym lista się kończy, aktualnie próżno jest nam szukać wsparcia od Edge’a, IE, Safari i praktycznie wszystkich przeglądarek mobilnych.

Za co odpowiada omawiana właściwość? W skrócie ustawia sposób, w jaki (dla konkretnego elementu na stronie) zachowa się scroll po tym gdy zostanie “przejęty” przez konkretny link.

Posłużę się bardzo podobnym przykładem do tego, którego można było oglądać w poprzednim podtytule, HTML ponownie może prezentować się w ten oto sposób:

<a href="#example">Kliknij, aby przejść pod wskazany odnośnik</a>

<span id="example">I oto jesteś!</span>

Ważniejszy natomiast jest kod CSS, w którym dodajemy naszą właściwość z wartością smooth do elementu html:

html {
    scroll-behavior: smooth;
}

Od tej chwili efekt powinien zacząć działać w na wymienionych wcześniej przeglądarkach, co widać na załączonym przykładzie:

See the Pen Płynne przewijanie do wskazanego punktu – Scroll-behavior by Robert Orliński (@ROrlilnski) on CodePen.

Podsumowanie.

Jak można zauważyć w dość przyjemny sposób możemy zaimplemetować płynne przewijanie na naszych stronach internetowych. Jesteśmy w stanie dokonać tego relatywnie prostym skryptem jQuery, a w przyszłości powinno być jeszcze łatwiejsze dzięki omawianej właściwości CSSa!

Standardowo w razie jakichkolwiek pytań lub sugestii zapraszam Cię do komentowania przeczytanego artykułu, a jeśli okazał się dla Ciebie pomocny, to jak zwykle będę niezwykle wdzięczny za jego udostępnienie! 🙂

Komentarze

Może dodasz coś od siebie?