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:
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
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 1326x (8.26 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
