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

Front-end 8 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 3 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: Biblioteka moveTo.js

Jeśli nie chcemy użyć biblioteki jQuery, to na pewno warto będzie się pochylić nad biblioteką wymienioną w podtytule.

Jest lekka, oparta tylko o VanillaJS i bardzo prosta w użyciu (w sumie jak większość tego typu rozwiązań).

Na początku warto będzie ją wrzucić na naszą stronę. Możemy zrobić to za pomocą npma:

npm install moveto --save

..Yarna:

yarn add moveto

…Bowera:

bower install moveTo --save

…lub oczywiście wrzucając całość z pliku, pobranego z GitHuba lub CDNa. Dla tego drugiego:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moveTo/1.8.2/moveTo.min.js"></script>

A później oczywiście, warto byłoby zainicjować naszą bibliotekę. A możemy zrobić to w JavaScript’cie:

const moveTo = new MoveTo();
const target = document.querySelector('element');
moveTo.move(target);

I co jeszcze istotne, do samego obiektu biblioteki, możemy wrzucić odrobinę parametrów:

new MoveTo({
  tolerance: 0,
  duration: 800,
  easing: 'easeOutQuart',
  container: window
})

Z pełną powagą muszę przyznać, że powyższe opcje, skopiowałem żywcem z tego, co twórca zapisał na GitHubie biblioteki (nawet odruchowo dodałem średnik, bo tak – lubię średniki, a później go usunąłem, by całość była bezczelną kopią) i dlatego też, na powyższego GitHuba Cię zapraszam, po wyjaśnienie tych opcji.

Czy pozostaje nam coś jeszcze? Sama struktura linku, który kieruje do odpowiedniego miejsca. Wg tego, pod co podpiąłem się w kodzie JSa:

<a href="#element-docelowy" class="element" data-mt-duration="300">Kliknij, by zjechać do konkretnego elementu</a>

I jak zapewne jeszcze widać, do elementu został dodany atrybut data-mt-duration. Otóż, każdą opcję, którą jesteśmy w stanie zadeklarować w JSie, możemy również dodać dla konkretnego elementu w HTMLu, poprzedzając jej nazwę, frazą data-mt.

Mamy to! Chyba wszystko, co dało się powiedzieć o tej bibliotece, zostało powiedziane, więc przejdźmy do jeszcze jednego i tym samym ostatniego sposobu.

Sposób 3: 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, a dość niedawno Edge i część 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 pierwszym sposobie. 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, biblioteką w czystym JSie, 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?