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:
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é 1327x (8.26 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
