IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Smooth scroll v jQuery

V minulé lekci, Úvod do jQuery, jsme si uvedli javascriptovou knihovnu jQuery a vytvořili v ní první jednoduchou webovou aplikaci.

Po častých dotazech na různé jQuery vymoženosti jsem se rozhodl sepsat seriál jQuery - praktické využití. Nebudeme se zde moc učit jQuery, tedy JS, jako takové, budeme si zde spíše ukazovat efektivní cesty, kterými si můžeme ušetřit čas a zkrátit kód.

Smooth scroll

Smooth scroll neboli hladké scrollování je snad nejčastěji využívaná funkce na moderním webu, hlavně tedy na minisites. Princip této funkce je v plynulé změně pozice obrazovky po kliku na nějaké tlačítko, nejčastěji v menu.

Mnoho lidí píše strašně zdlouhavý a neefektivní kód (myšleno hodně kódu a mizerný výsledek). Tuto funkci lze však napsat v podstatě na 3 řádky.

Jako obvykle, kód píšeme mezi

$(function() {

  // kód...

});

Tak, začátek máme. Připravte si také nějaký pokusný web s navigačním menu a delším textem s nadpisy, mezi kterými budeme stránkou rolovat. Já jsem stránku rozdělil na 3 barevné části a na ty odkázal z menu. Každá část se nalézá v <div>u s příslušným id, na které se odkazuje z menu. Kód v <body> bez dlouhých textů by vypadal asi takto:

<body>

    <nav id="menu">
        <ul>
            <li><a href="#cerveny" class="button"><span>ČERVENÝ</span></a></li>
            <li><a href="#zeleny" class="button"><span>ZELENÝ</span></a></li>
            <li><a href="#modry" class="button"><span>MODRÝ</span></a></li>
            <li id="itnetwork"><span>ITnetwork.cz</span></li>
        </ul>
    </nav>

    <div id="red">
        ...dlouhý text...
    </div>
    <div id="green">
        ...dlouhý text...
    </div>
    <div id="blue">
        ...dlouhý text...
    </div>

</body>

Výsledek:

Tvoje stránka
localhost

Jak začneme? Určitě vás již napadlo, že musíme nějak odchytit kliknutí na tlačítko. Naše tlačítka musí obsahovat jednak atribut href, pro určení kam se má stránka scrollovat, a také třídu, díky které vymezíme jen naše určitá tlačítka.

<a href="#cerveny" class="tlacitko">ČERVENÝ</a>

Pro výběr našich tlačítek nám bude sloužit

$('a.tlacitko')

Na něj napojíme událost click.

$('a.tlacitko').on('click', function() {

});

Do této anonymní funkce budeme psát zbytek našeho scriptu. Nejdříve je třeba určit kam budeme směřovat, tedy náš cíl.

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

Pokud používáme fixní menu, které se na minisites většinou používá, je třeba vybrat i jej.

var menu = $('#menu');

A na závěr je třeba nastavit rychlost animace. Ta se udává vždy v milisekundách.

var rychlost = 2 * 1000;

To bychom měli všechno co se týče nastavení. Nyní je čas na animaci. K tomu použijeme funkci animate(), ve které budeme animovat scrollTop na pozici našeho cíle. Pozici cíle získáme z $(cil).offset().top a navíc od ní odečteme výšku menu, tu však odečítejte pouze je-li menu fixní.

Ale co budeme animovat? Bude to <body> a <html>.

$("html, body").animate(
    { scrollTop: $(cil).offset().top - menu.height() },
    rychlost, efekt
);

To bychom v základu měli. Ještě ale přidáme zamezení vypisování našeho cíle do URL adresy. To se udělá úplně jednoduše. Mimochodem, do anonymní funkce si přidejte také parametr e, abychom mohli zrušit výchozí akci, což je přesměrování prohlížeče na odkaz. Tuto akci jsme nyní převzali my.

e.preventDefault();

Pokud si nyní otestujeme náš kód, můžeme si všimnout, že při rychlém naklikání např. 10ti položek menu nám obrazovka skáče sem a tam. Je to tím že po kliku na tlačítko se nám spustí animace a když klikneme na další tlačítko, animace se nám přesune jakoby do fronty. Tento efekt můžeme zamezit přidáním

.stop();

To nám ukončí aktuální animaci a zahájí nám naší novou. A jsme u konce.

Krása, že? Celkový script bude vypadat nějak takto:

$('a.tlacitko').on('click', function(e) {
    let cil = $(this).attr('href');
    let menu = $('#menu');
    let rychlost = 2 * 1000;

    $("html, body").stop().animate(
        { scrollTop: $(cil).offset().top - menu.height() },
    rychlost);

    e.preventDefault();
});

Kód se dá samozřejmě ještě zmenšit o nastavování proměnných atp., ale myslím, že takto to bude bohatě stačit.

V příští lekci, Vkládání obsahu v jQuery (DOM), si ukážeme, jak lze přes jQuery měnit obsah webové stránky, tedy manipulaci s DOM.


Galerie

Program byl vytvořen v roce 2014.

 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 1323x (8.26 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Úvod do jQuery
Všechny články v sekci
jQuery - Dynamické doplňky webu snadno a rychle
Přeskočit článek
(nedoporučujeme)
Vkládání obsahu v jQuery (DOM)
Program pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
20 hlasů
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity