Funkcia ako tlačidlo „hore“stránky robí internetový zdroj pre návštevníkov pohodlnejším. Pomôže vám to jednoducho prejsť z ľubovoľného miesta na stránke do hornej časti stránky. Toto je nevyhnutnosť pre internetové obchody a stránky s veľkými článkami, ktoré si vyžadujú dlhé posúvanie nadol.
Na čo slúži
V súčasnosti väčšina stránok nemá takú funkciu ako tlačidlo „hore“a nie je v tom nič kritické. Jeho použitie však môže priniesť množstvo výhod pre internetový zdroj aj pre jeho návštevníkov.
Výhoda pre návštevníkov
Často sa to stáva, keď je stránka internetového zdroja veľmi nabitá informáciami, keď informačný článok zaberá veľa miesta a musíte posúvať stránku dole pomocou kolieska myši. Okrem toho môže byť na konci článku k nemu veľa komentárov.
Keď návštevník číta článok, nie je nič únavné na posúvaní stránky nadol, ale keď sa text skončí a vy sa musíte posunúť vyššie, začne to byť trochu únavné. Väčšina ľudí bude jednoducho príliš lenivá na to, aby sa posúvali na dlhú dobu, a jednoducho zatvoria stránku namiesto ďalšej prechádzky po jej rozlohách.
Pomocou tlačidlaokamžitý prechod na začiatok stránky uľahčuje trávenie času na stránke.
Výhoda pre internetový zdroj
Pozitívy pre samotný zdroj pochádzajú z minulých faktorov, pretože jednoduchšia navigácia na stránke zlepšuje faktory správania, pretože všetci návštevníci budú aktívnejší vo svojich akciách a presunú sa na iné stránky.
Tieto faktory správania teda ovplyvňujú postoj všetkých vyhľadávačov k stránke a vedú k zlepšeniu pozície vo výsledkoch vyhľadávania.
Ako si sami vytvoriť tlačidlo „up“na stránke
Zaobchádzanie ďalej. Vždy si môžete sami vytvoriť tlačidlo posúvania nahor pre stránku v ktoromkoľvek CMS vykonaním niekoľkých veľmi jednoduchých krokov:
- tvorba obrázkov;
- tvorba skriptu;
- vytvoriť štýl tlačidla;
- pridanie na stránku.
Obrázok tlačidla
Ak chcete na stránku pridať tlačidlo „hore“, musíte najskôr vytvoriť samotnú ikonu, po kliknutí sa používateľ presunie na začiatok stránky. K tomu môžete použiť hotové možnosti, medzi ktorými si vždy vyberiete tú najvhodnejšiu.
Na zlepšenie vzhľadu tlačidla musíme urobiť niekoľko vylepšení, konkrétne vytvoriť sprite, ktorý nám umožní kombinovať obrázky na pozadí založené na CSS, a tak z nich vytvoriť animáciu.
Na grafické práce môžete použiť ľubovoľný editor. Najpohodlnejšou možnosťou by však bola služba online. PIXLR, keďže tu nie je čo sťahovať a môžete to použiť priamo vo svojom prehliadači.
Ak chcete začať, v zobrazenom okne editora vyberte pole „Nahrať obrázok z počítača“. Vezmime si ako príklad obrázok rakety.
Ak sú rozmery vybratej ikony príliš veľké, budete musieť vykonať malú úpravu veľkosti. Ak to chcete urobiť, prejdite do horného menu a vyberte pole „Upraviť“a po „Voľná transformácia …“
Ďalej sa vedľa obrázka objavia špeciálne značky, pomocou ktorých môžete zmeniť veľkosť obrázka. Ak chcete zachovať proporcie, môžete použiť kláves Shift, podržaním ktorého musíte posúvať modré značky. Na konci týchto krokov sa získa obrázok rakety.
Ďalším krokom je vytvorenie kópie vrstvy.
Teraz musíte posunúť obrázok rakety z novej vrstvy o niečo vyššie. Na tento účel bude vhodné použiť nástroj na presun, ktorý sa nachádza v druhom stĺpci ľavého menu, a šípku nahor na klávesnici.
Teraz musíme urobiť horný obrázok čiernobielym. To je možné vykonať pomocou položky "Korekcia" - "Odtieň / Sýtosť" v hornom menu. Pre úplnú desaturáciu by mal byť posuvník Saturation nastavený na -100. Táto akcia vám umožní vytvoriť efekt, v ktorom sa tlačidlo „Hore“zmení z čiernej a bielej na farebné, keď naň umiestnite kurzor myši.
Posledným krokom je odstránenie nadbytočného priestoru okolo dvoch obrázkov. Ak to chcete urobiť, vyberte položku "Orezať" z ľavého menu avyberieme len dve rakety v obdĺžniku. Ak chcete vykonať orezanie, stlačte kláves Enter.
Výsledkom je obrázok, na ktorom nie je žiadne voľné miesto navyše. Budete si musieť zapísať šírku a výšku výsledného obrázka, pretože tieto údaje budú užitočné v ďalšom kroku.
Pre uloženie je potrebné kliknúť na „Súbor“– „Uložiť“, kde do ľavého odseku „Tento počítač“napíšeme názov obrázka (iba anglické rozloženie), vyberte formát (v tomto prípad, PNG) a kliknite na tlačidlo „Áno“.
Súbor so skriptom tlačidla „hore“
V tomto prípade nemusíte písať skript. Bude možné použiť verejnú verziu s vykonaním niekoľkých zmien v hotovom kóde.
Ak to chcete urobiť, musíte si stiahnuť ľubovoľný editor kódu. Najpopulárnejšou a tiež bezplatnou možnosťou je Notepad++. Po inštalácii musíte skopírovať a prilepiť celý tento kód:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Ďalej kliknite v hornom menu na "Súbor" - "Uložiť ako …", potom kód uložíme vo formáte.js. Potom môžete tento kód použiť na svojej stránke tak, že na ňu nahráte súbory skriptov a obrázky pomocou pripojenia FTP.
Inštalovať na mieste
Ak chcete nastaviť tlačidlo posúvania nahor pre web, musíte ho umiestniťpožadovaný kód miesta. Musíte ho zadať pred štítkom.
Vytvorenie štýlu tlačidla pomocou CSS
Tlačidlo „hore“pre stránku sa najčastejšie nachádza v spodnej časti („päta“).
Nasledovný kód musí byť pridaný do súboru style.css stránky:
|
/Tlačidlo nahor/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ button šírka/ height:96px;/50% výška tlačidla/ bottom:5px;/dolné čalúnenie na pevnej pozícii/ left:89%;/shift left/ .scrollTop:hover{ background-position:0 -108px; } /posun pozadia/" |
V tomto prípade budú potrebné tieto údaje o šírke a výške obrázka. Zostáva len zadať prijaté údaje do kódu a tlačidlo „hore“pre stránku bude pripravené! Čo ešte?
Tlačidlo nahor pre stránku Wordpress
Pre tento CMS môže byť tlačidlo „Hore“vytvorené pomocou doplnkov, ako aj nezávisle.
Metóda doplnkov je najpohodlnejšia a najjednoduchšia na inštaláciu, pretože vyžaduje iba kliknutie na tlačidlo inštalácie a konfiguráciu všetkých funkcií v ponuke doplnkov.
K výberu druhej možnosti by sa malo pristupovať opatrne, pretože s ňou bude ľahké získať vírus na stránke. Najpopulárnejšou a osvedčenou možnosťou je plugin s názvom Scroll Back To Top. Môžete si ho stiahnuť pomocou štandardného vyhľadávania doplnkov Wordpress.
Toto rozšírenie máviac funkcií a bude veľmi jednoduché prispôsobiť tlačidlo "hore" pre stránku Wordpress. Vôbec nie je potrebné meniť všetky hodnoty, stačí nastaviť vzhľad a umiestnenie tlačidla na stránke webu.
Ako vidíte, nastavenie tlačidla s doplnkami je veľmi jednoduché. Existuje však jedna dôležitá nuansa, a to, že každý nainštalovaný doplnok načíta CMS. To môže ovplyvniť rýchlosť internetového zdroja. Preto sa väčšina vlastníkov stránok snaží robiť všetky zmeny priamo v kóde, a nie pomocou rozšírení tretích strán. Pre stránku HTML môžete vytvoriť tlačidlo „hore“, čím sa minimalizujú spotrebované zdroje.
Pred zmenou všetkých systémových súborov Wordpress ich musíte zálohovať. Potom môžete postupovať podľa všetkých krokov na vytvorenie vlastného tlačidla, ktoré sú popísané vyššie.
Tlačidlo „hore“pre Joomla
CMS Joomla podporuje aj inštaláciu doplnkov, ako je Wordpress. Najúspešnejšou verziou tlačidla „hore“pre stránky na Joomla 3 je rozšírenie s názvom Top of the Page.
V tomto CMS je možné nainštalovať akýkoľvek plugin cez "Extension Manager". Na to potrebujete:
- stiahnite si doplnok na internete;
- kliknite na tlačidlo „Prehľadávať“v správcovi rozšírení;
- vybrať stiahnutý archív;
- kliknite na „Stiahnuť“a nainštalujte.
Teraz ho musíte aktivovať v „Správcovi doplnkov“. Pre tomusíte prejsť do tejto sekcie, nájsť doplnok a prepnúť jeho stav na „povolené“.
Ďalším krokom je nakonfigurovať všetky parametre rozšírenia pomocou rovnakej sekcie, kde na pravej strane potrebujete nájsť „Základné parametre“tohto pluginu.
Horná časť stránky má nasledujúce funkcie:
- Spustiť/administrátor – povolenie možnosti nielen na internetovom zdroji, ale aj na samotnom paneli CMS Joomla.
- Pozícia zobrazenia tlačidla – koľko pixelov musí používateľ pretočiť dozadu, aby sa zobrazilo tlačidlo nahor.
- Vynechať text tlačidla – prítomnosť textu na tlačidle.
- Vždy navrchu – stránka lokality sa bude vždy zobrazovať zvrchu. Keď používate kotvy na posúvanie na konkrétne miesto na stránke, táto možnosť nemusí byť povolená.
- Smooth Scroll – robí rolovanie stránky plynulejším.
- Scroll Duration – čas, po ktorom sa stránka úplne presunie na začiatok.
- Prechod posúvania – pridáva k posúvaniu viac vizuálnych efektov.
- Uľahčenie prechodu – „oslabenie“pohybu na začiatok stránky.
- Umiestnenie odkazu – umiestnenie ikony. Štandardne sa tlačidlo nachádza v pravom dolnom rohu.
- Použiť štýly – individuálny štýl tlačidiel, ktorý je možné nastaviť v poli nižšie. Ak prepnete na zápornú hodnotu, potom sa všetky nastavenia štýlu prevezmú z aktívnej témy stránky.
- Štýl odkazu – pole na zadanie parametrov štýlu tlačidla.
Ak chcete prispôsobiť štýl tlačidla „hore“, musíte ho mať aspoň minimálneznalosti CCS. V opačnom prípade by ste mali prepnúť hodnotu predposledného parametra na "Nie".
Ďalšou dôležitou nuansou je, že zvyčajný nápis na ikone obsahuje anglický text: Návrat na začiatok. Takýto text sa nemôže nachádzať na stránkach v ruskom jazyku, takže by ste ho mali jednoducho zakázať v parametroch pluginu alebo ho zmeniť na ruský.
Ak chcete zmeniť tento nápis, musíte prejsť na server lokality pomocou FTP alebo správcu súborov zabudovaného do hostingu. Ďalej v adresári "/administrator/language/en-GB/" musíte nájsť súbor s názvom "en-GB.plg_system_topofthepage.ini".
Pred zmenou textu by ste mali zmeniť kódovanie tohto dokumentu na UTF-8. To spôsobí normálne zobrazenie ruských písmen.
Ďalej nájdeme nasledujúci riadok:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Späť na začiatok"" |
a zmeňte frázu v úvodzovkách na ruštinu. Môžete použiť frázy ako "Hore!", "Na vrchol!" alebo „Hore!“.
Na konci budete musieť uložiť upravený súbor a skontrolovať tlačidlo "hore" pre stránku na Joomla.
Tlačidlo nahor pre Ucoz
Tlačidlo "hore" pre stránku na Ucoz bude potrebné vykonať pomocou vloženia kódu, pretože nie je možné pripojiť pluginy pre tento CMS. To si však nevyžaduje dlhé štúdium systémových súborov a hľadanie potrebných riadkov, stačí vložiť malý kód na správne miesto.
Nainštalujte si náspovinné:
- prejdite na "Ovládací panel -> Dizajn -> Správa dizajnu (šablóny) -> Spodná časť stránky;
- vložte skript (nájdete ho na oficiálnej webovej stránke projektu a zdrojoch tretích strán).
Záver
Potom sa v pravom dolnom rohu zobrazí ikona, ktorá presunie používateľa úplne hore na stránku.
Ako môžete vidieť, nastavenie tlačidla Späť pre ktorýkoľvek z CMS nebolo obzvlášť ťažké. Môžete použiť automatickú metódu inštalácie (pluginy) aj manuálnu. Posledná možnosť však zostáva najvhodnejšou, pretože neovplyvňuje nepriaznivo výkon stránky.
Pre stránky HTML môžete použiť tlačidlo „späť na začiatok“, aby ste minimalizovali spotrebu zdrojov lokality, pretože veľký počet rozšírení môže mať negatívny vplyv na výkon zdroja. Jeden plugin s tlačidlom „hore“nedokáže výrazne ovplyvniť čas načítania stránok webu, no vo väčšine prípadov má používateľ v CMS nainštalovaných aspoň tucet pluginov. V tomto prípade môže akýkoľvek doplnok nepriaznivo ovplyvniť výkon stránok lokality.
