Tlačidlo, ktoré nascrolluje hore

Jedná sa vpodstate len o grafickú vychytávku stránky. Túto vec zvládne samotné HTML, avšak bez grafického efektu, kde sa okno pekne vyscrolluje na samí vrch stránky. Táto informácia nám je užitočná práve z kompatibility pre užívateľov bez povoleného JavaScriptu.

Keďže sa jedná o pomerne jednoduchú vec tak neváhajme a poďme na to. Najskôr si spravíme HTML odkaz, na ktorý neskôr po stlačení naviažeme kód.

<a href="#" id="hore">hore</a>

Tlačidlo máme hotové, teraz ho nastylujeme aby scrollovalo v pravom dolnom rohu spolu so stránkou.

a#hore { position: fixed; bottom: 8px; right: 8px; padding: 4px; background-color: #000000; color: #FFFFFF; }

Tlačidlo si môžte samozrejme nastylovat sami podľa vášho vkusu, avšak pre ukážku sme zvolili aspoň tento základny design. V tejto chvíli už tlacidlo funguje, avšak bez efektu, ktorý chceme týmto článkom dosiahnuť. Poďme teda na trošku tahšiu čast a to jQuery.

scrollHore = { nastavenia: { pauza: false }, casovac:function() { scrollHore.nastavenia.pauza = false; }, init:function(rychlost) { $(document).ready(function() { $("a#hore").css('display','none'); $(window).scroll(function () { var top = jQuery(window).scrollTop(); if(top > 100) $("a#hore:hidden").fadeIn('fast'); else $("a#hore:visible").fadeOut('fast'); }); $('a#hore').click(function() { if(scrollHore.nastavenia.pauza == false) { $body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') $body.animate({scrollTop: 0}, rychlost); scrollHore.nastavenia.pauza = true; setTimeout("scrollHore.casovac()", rychlost); } return false; }) }) } } scrollHore.init(1000);

Po pridaní tohto kódu už všetko ide ako má s našim sľubovaným efektom. Poďme sa na skript pozrieť trošku bližšie a rozoberme si ho. Kód sa vpodstate skladá z 2 hlavných častí. Prvá časť je samotný kód, tento kód si pokojne môžte vložiť do samotného súboru a potom ho načítať v hlavičke. Druhá časť je inicializácia kódu, ktorý príjma ako parameter rýchlosť scrollovania v ms (1000ms = 1s).

Teraz si ale blizsie rozobrať prvú časť kódu. Na začiatku kódu máme v nastaveniach premennú pauza, ktorá je nastavená na false. Táto premenná nám hovorí, či sa náš kód vykonáva. Potom tu je funkcia casovac, ktorá je volaná v setTimeout() neskôr a nastavuje nám premennú pauza na false. A nakoniec tretia a posledná časť kódu je inicializácia. Tento kód sa uvedie do funkčnosti akonáhle je dokument pripravený. Na začiatku skryje naše tlačidlo. Ďalšia čast kódu je vyvolaná len ak stránka scrolluje. A za tejto akcie zistí aktuálnu pouzíciu stránky a overí či je stránka viac než 100px z vrchu. V prípade, že áno objaví sa naše tlačidlo, inak sa stratí. Posledná časť je volaná v prípade, že je kliknuté na naše tlačidlo. Na začiatku vyrieši problém s malou nekompatibilitou prehliadačov, vyvolá samotnú animáciu scrollovania, nastaví premennú pauza na true a spustí casovac, ktorý zabraňuje aby sa animácia nevykonala dokiaľ neskončí.

Tagy: tlacidlo autoscroll hore