prihlasenyprihlasit | registrovat

Tlačidlo, ktoré nascrolluje hore

Grafická vychytávka, ktorá nám po stlačení tlačidla pomaly vyscrolluje stránku úplne 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.

view plaincopy to clipboardprint?
  1. <a href="#" id="hore">hore</a>  

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

view plaincopy to clipboardprint?
  1. a#hore  
  2. {  
  3.    position: fixed;  
  4.    bottom: 8px;  
  5.    right: 8px;  
  6.    padding: 4px;  
  7.    background-color: #000000;  
  8.    color: #FFFFFF;  
  9. }  

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.

view plaincopy to clipboardprint?
  1. scrollHore =  
  2. {  
  3.    nastavenia:  
  4.    {  
  5.       pauza: false  
  6.    },  
  7.      
  8.    casovac:function()  
  9.    {  
  10.       scrollHore.nastavenia.pauza = false;  
  11.    },  
  12.      
  13.    init:function(rychlost)  
  14.    {  
  15.       $(document).ready(function()  
  16.       {  
  17.          $("a#hore").css('display','none');  
  18.            
  19.          $(window).scroll(function ()  
  20.          {  
  21.             var top = jQuery(window).scrollTop();  
  22.             if(top > 100) $("a#hore:hidden").fadeIn('fast');  
  23.             else $("a#hore:visible").fadeOut('fast');  
  24.          });  
  25.   
  26.          $('a#hore').click(function()  
  27.          {  
  28.             if(scrollHore.nastavenia.pauza == false)  
  29.             {  
  30.                $body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')   
  31.                $body.animate({scrollTop: 0}, rychlost);  
  32.                scrollHore.nastavenia.pauza = true;  
  33.                setTimeout("scrollHore.casovac()", rychlost);  
  34.             }  
  35.             return false;  
  36.          })  
  37.       })  
  38.    }  
  39. }  
  40.   
  41. 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čí.

shaddow

07.09.2009 | 19:09

celkom 0

Komentáre

Zatiaľ žiadne komentáre

© 2009 Shaddow admin hosting od VIPHosting

▲