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

Po častých otázkach na rôzne jQuery vymoženosti som sa rozhodol spísať seriál jQuery - praktické využitie. Nebudeme sa tu moc učiť jQuery, teda JS, ako také, budeme si tu skôr ukazovať efektívne cesty, ktorými si môžeme ušetriť čas a skrátiť kód.

Smooth scroll

Smooth scroll čiže hladké scrollovanie je snáď najčastejšie využívaná funkcia na modernom webe, hlavne teda na minisites. Princíp tejto funkcie je v plynulej zmene pozície obrazovky po kliku na nejaké tlačidlo, najčastejšie v menu.

Mnoho ľudí píše strašne zdĺhavý a neefektívny kód (myslené veľa kódu a mizerný výsledok). Túto funkciu môžete však napísať v podstate na 3 riadky.

Ako obvykle, kód píšeme medzi

$(function() {

  // kód...

});

Tak, začiatok máme. Pripravte si tiež nejaký pokusný web s navigačným menu a dlhším textom s nadpismi, medzi ktorými budeme stránkou rolovať. Ja som stránku rozdelil na 3 farebné časti a na tie odkázal z menu. Každá časť sa nachádza v <div> us príslušným id, na ktoré sa odvoláva z menu. Kód v <body> bez dlhých textov by vyzeral 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ýsledok:

Tvoja stránka
localhost

Ako začneme? Určite vás už napadlo, že musíme nejako odchytiť kliknutí na tlačidlo. Naše tlačidla musí obsahovať jednak atribút href, pre určenie kam sa má stránka scrollovať, a tiež triedu, vďaka ktorej vymedzíme len naša určitá tlačidla.

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

Pre výber našich tlačidiel nám bude slúžiť

$('a.tlacitko')

Na neho napojíme udalosť click.

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

});

Do tejto anonymný funkcie budeme písať zvyšok nášho scriptu. Najskôr je potrebné určiť kam budeme smerovať, teda náš cieľ.

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

Ak používame fixné menu, ktoré sa na minisites väčšinou používa, je potrebné vybrať aj ho.

var menu = $('#menu');

A na záver je potrebné nastaviť rýchlosť animácie. Tá sa udáva vždy v milisekundách.

var rychlost = 2 * 1000;

To by sme mali všetko čo sa týka nastavenia. Teraz je čas na animáciu. K tomu použijeme funkciu animate(), v ktorej budeme animovať scrollTop na pozícii nášho cieľa. Pozíciu ciele získame z $(cil).offset().top a navyše od nej odpočítame výšku menu, tu však odčítajte iba ak je menu fixné.

Ale čo budeme animovať? Bude to <body> a <html>.

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

To by sme v základe mali. Ešte ale pridáme zamedzenie vypisovanie nášho cieľa do URL adresy. To sa urobí úplne jednoducho. Mimochodom, do anonymný funkcie si pridajte tiež parameter e, aby sme mohli zrušiť predvolenú akciu, čo je presmerovanie prehliadača na odkaz. Túto akciu sme teraz prevzali my.

e.preventDefault();

Ak si teraz otestujeme náš kód, môžeme si všimnúť, že pri rýchlom naklikání napr. 10tich položiek menu nám obrazovka skáče sem a tam. Je to tým že po kliku na tlačidlo sa nám spustí animácia a keď klikneme na ďalšie tlačidlo, animácie sa nám presunie akoby do fronty. Tento efekt môžeme zamedziť pridaním

.stop();

To nám ukončí aktuálnu animáciu a začne nám našou novou. A sme u konca.

Krása, že? Celkový script bude vyzerať nejako 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 sa dá samozrejme ešte zmenšiť o nastavovaní premenných atp., Ale myslím, že takto to bude bohato stačiť.


 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 1323x (8.26 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Všetky články v sekcii
Hotová riešenie v JavaScripte
Článok pre vás napísal Honza Bittner
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity