Funkce, jako je tlačítko „nahoru“pro web dělá internetový zdroj pro jeho návštěvníky pohodlnější. Pomůže vám snadno se přesunout odkudkoli na stránce do horní části stránky. Toto je nutnost pro internetové obchody a weby s velkými články, které vyžadují dlouhé posouvání dolů.
K čemu to je
V současné době většina webů nemá takovou funkci jako tlačítko „nahoru“a není v tom nic kritického. Jeho použití však může přinést mnoho výhod jak pro internetový zdroj, tak pro jeho návštěvníky.
Výhoda pro návštěvníky
Často se to stává, když je stránka internetového zdroje silně zatížena informacemi, když informační článek zabírá hodně místa a musíte po stránce rolovat dolů kolečkem myši. Kromě toho může být na konci článku k němu mnoho komentářů.
Když si návštěvník přečte článek, není nic únavného na posouvání stránky dolů, ale když text skončí a musíte se posunout nahoru, začne to být trochu únavné. Většina lidí bude jednoduše příliš líná na to, aby se posouvali po dlouhou dobu, a místo toho, aby se znovu procházeli po jeho rozlohách, jednoduše zavřou web.
Pomocí tlačítkaokamžitý přesun na začátek stránky usnadňuje trávení času na webu.
Výhoda pro internetový zdroj
Pozitivní pro samotný zdroj jsou minulé faktory, protože snadnější navigace na webu zlepšuje faktory chování, protože všichni návštěvníci budou aktivnější ve svých akcích a přesunou se na jiné stránky.
Tyto faktory chování tedy ovlivňují postoj všech vyhledávačů k webu a vedou ke zlepšení pozice ve výsledcích vyhledávání.
Jak si sami vytvořit tlačítko „nahoru“na webu
Zabýváme se dále. Vždy si můžete sami vytvořit tlačítko pro posouvání stránky na libovolném CMS pomocí několika extrémně jednoduchých kroků:
- tvorba obrázku;
- vytvoření skriptu;
- vytvořit styl tlačítka;
- přidání na web.
Obrázek tlačítka
Chcete-li na stránku přidat tlačítko „nahoru“, musíte nejprve vytvořit samotnou ikonu, po kliknutí se uživatel přesune na začátek stránky. K tomu můžete využít již hotové možnosti, mezi kterými si vždy vyberete tu nejvhodnější.
Abychom vylepšili vzhled tlačítka, musíme provést některá vylepšení, konkrétně vytvořit sprite, který nám umožní kombinovat obrázky na pozadí založené na CSS, a tím z nich vytvořit animaci.
Pro grafické práce můžete použít jakýkoli editor. Nejpohodlnější možností by však byla online služba. PIXLR, protože zde není co stahovat a můžete to použít přímo ve svém prohlížeči.
Začněte tím, že v okně editoru, které se zobrazí, vyberte pole „Nahrát obrázek z počítače“. Vezměme si obrázek rakety jako příklad.
Pokud jsou rozměry vybrané ikony příliš velké, budete muset provést malou úpravu velikosti. Chcete-li to provést, přejděte do horní nabídky a vyberte pole "Upravit" a po "Volná transformace …"
Poté se vedle obrázku objeví speciální značky, kterými můžete změnit velikost obrázku. Chcete-li zachovat proporce, můžete použít klávesu Shift, přidržením které musíte přesunout modré značky. Na konci těchto kroků se získá snímek rakety.
Dalším krokem je vytvoření kopie vrstvy.
Nyní musíte posunout obrázek rakety z nové vrstvy o něco výš. K tomu bude vhodné použít nástroj pro přesun, který se nachází ve druhém sloupci levého menu, a šipku nahoru na klávesnici.
Nyní musíme udělat horní obrázek černobílý. To lze provést pomocí položky "Korekce" - "Odstín / Sytost" v horním menu. Pro úplnou desaturaci by měl být posuvník Saturation nastaven na -100. Tato akce vám umožní vytvořit efekt, ve kterém se tlačítko „Nahoru“změní z černobílého na barevné, když na něj najedete myší.
Posledním krokem je odstranění nadbytečného prostoru kolem dvou obrázků. Chcete-li to provést, vyberte položku "Oříznout" z levé nabídky avybereme pouze dvě rakety v obdélníku. Chcete-li provést oříznutí, stiskněte klávesu Enter.
Výsledkem je obrázek, na kterém není žádné volné místo navíc. Budete si muset zapsat šířku a výšku výsledného obrázku, protože tyto údaje budou užitečné v dalším kroku.
Pro uložení je třeba kliknout na "Soubor" - "Uložit", kde do levého odstavce "Tento počítač" napíšeme název obrázku (pouze anglické rozložení), vyberte formát (v tomto case, PNG) a klikněte na tlačítko "Ano".
Soubor se skriptem tlačítka "nahoru"
V tomto případě nemusíte psát skript. Bude možné použít veřejnou verzi a provést některé úpravy hotového kódu.
Abyste to mohli udělat, musíte si stáhnout libovolný editor kódu. Nejoblíbenější a také bezplatná možnost je Notepad++. Po instalaci do něj musíte zkopírovat a vložit 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;}); }); |
Poté klikněte v horním menu na "Soubor" - "Uložit jako …", poté kód uložíme ve formátu.js. Poté můžete tento kód použít na svém webu tak, že na něj nahrajete soubory skriptů a obrázky pomocí připojení FTP.
Instalovat na webu
Chcete-li pro web nastavit tlačítko pro posun nahoru, musíte jej umístitpožadovaný kód místa. Musíte jej zadat před štítkem.
Vytvoření stylu tlačítka pomocí CSS
Tlačítko „nahoru“pro web se nejčastěji nachází v dolní části („zápatí“).
Do souboru style.css webu je třeba přidat následující kód:
|
/Tlačítko nahoru/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/nativní cesta k obrázku/ width:39px;/ tlačítko width/ height:96px;/50% výška tlačítka/ bottom:5px;/dolní výplň na pevné pozici/ left:89%;/shift left/ .scrollTop:hover{ background-position:0 -108px; } /posun pozadí/" |
V tomto případě budou potřeba tyto údaje o šířce a výšce obrázku. Zbývá pouze zadat přijatá data do kódu a tlačítko „nahoru“pro web bude připraveno! Co ještě?
Tlačítko nahoru pro web Wordpress
U tohoto CMS lze tlačítko „Nahoru“vytvořit pomocí pluginů i nezávisle.
Metoda pluginů je nejpohodlnější a nejsnadněji se instaluje, protože vyžaduje pouze kliknutí na tlačítko instalace a konfiguraci všech funkcí v nabídce pluginu.
K výběru druhého jmenovaného by se mělo přistupovat opatrně, protože s ním bude snadné získat virus na webu. Nejoblíbenější a osvědčenou možností je plugin s názvem Scroll Back To Top. Můžete si jej stáhnout pomocí standardního vyhledávání pluginů Wordpress.
Toto rozšíření mávíce funkcí a bude velmi snadné přizpůsobit tlačítko "nahoru" pro web Wordpress. Není nutné vůbec měnit všechny hodnoty, stačí pouze nakonfigurovat vzhled a umístění tlačítka na stránce webu.
Jak můžete vidět, nastavení tlačítka pro nastavení pomocí pluginů je velmi snadné. Je tu ale jedna důležitá nuance, a to, že každý nainstalovaný plugin načítá CMS. To může ovlivnit rychlost internetového zdroje. Většina majitelů stránek se proto snaží provádět všechny změny přímo v kódu, a ne s pomocí rozšíření třetích stran. Pro stránky HTML můžete vytvořit tlačítko „nahoru“, což minimalizuje spotřebované zdroje.
Před změnou všech systémových souborů Wordpress je musíte zálohovat. Poté můžete provést všechny kroky k vytvoření vlastního tlačítka, popsané výše.
Tlačítko „nahoru“pro Joomla
CMS Joomla také podporuje instalaci pluginů, jako je Wordpress. Nejúspěšnější verzí tlačítka „nahoru“pro web na Joomla 3 je rozšíření nazvané Top of the Page.
V tomto CMS lze nainstalovat jakýkoli plugin prostřednictvím "Extension Manager". K tomu potřebujete:
- stáhněte si plugin na internetu;
- klikněte na tlačítko "Procházet" ve správci rozšíření;
- vyberte stažený archiv;
- klikněte na „Stáhnout“a nainstalujte.
Nyní jej musíte aktivovat ve "Správci pluginů". Pro tohlemusíte jít do této sekce, najít plugin a přepnout jeho stav na "povoleno".
Dalším krokem je konfigurace všech parametrů rozšíření pomocí stejné sekce, kde na pravé straně potřebujete najít „Základní parametry“tohoto pluginu.
Horní část stránky má následující funkce:
- Spustit/administrátor – povolení této možnosti nejen na internetovém zdroji, ale také v samotném panelu Joomla CMS.
- Pozice zobrazení tlačítka – kolik pixelů musí uživatel přetočit zpět, aby se zobrazilo tlačítko nahoru.
- Vynechat text tlačítka – přítomnost textu na tlačítku.
- Vždy nahoře – stránka webu se bude vždy zobrazovat shora. Když používáte kotvy k posouvání na konkrétní místo na stránce, tato možnost nemusí být povolena.
- Smooth Scroll – usnadňuje posouvání stránky.
- Scroll Duration – doba, po které se stránka úplně přesune na začátek.
- Přechod posouvání – přidává další vizuální efekty posouvání.
- Zmírnění přechodu – „oslabení“pohybu na začátek stránky.
- Umístění odkazu – umístění ikony. Ve výchozím nastavení je tlačítko umístěno v pravém dolním rohu.
- Use Styles – individuální styl tlačítek, který lze nastavit v poli níže. Pokud přepnete na zápornou hodnotu, všechna nastavení stylu budou převzata z aktivního motivu webu.
- Styl odkazu – pole pro zadání parametrů stylu tlačítka.
Pro přizpůsobení stylu tlačítka „nahoru“musíte mít alespoň minimálníznalost CCS. V opačném případě byste měli přepnout hodnotu předposledního parametru na "Ne".
Další důležitou nuancí je, že obvyklý nápis na ikoně obsahuje anglický text: Návrat na začátek. Takový text nemůže být přítomen na stránkách v ruštině, takže byste jej měli jednoduše zakázat v parametrech pluginu nebo jej změnit na ruštinu.
Chcete-li změnit tento nápis, musíte přejít na server webu pomocí FTP nebo správce souborů zabudovaného do hostingu. Dále v adresáři "/administrator/language/en-GB/" musíte najít soubor s názvem "en-GB.plg_system_topofthepage.ini".
Před změnou textu byste měli změnit kódování tohoto dokumentu na UTF-8. To způsobí normální zobrazení ruských písmen.
Dále najdeme následující řádek:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Návrat na začátek"" |
a změňte frázi v uvozovkách na ruštinu. Můžete použít fráze jako "Nahoru!", "Nahoru!" nebo „Nahoru!“.
Na konci budete muset uložit upravený soubor a zkontrolovat tlačítko "nahoru" pro web na Joomle.
Tlačítko nahoru pro Ucoz
Tlačítko "nahoru" pro web na Ucoz bude muset být provedeno pomocí vkládání kódu, protože není možné připojit pluginy pro tento CMS. To však nevyžaduje dlouhé studium systémových souborů a hledání potřebných řádků, stačí vložit malý kód na správné místo.
Nainstalujte náspovinné:
- přejděte na "Ovládací panel -> Design -> Správa designu (šablony) -> Spodní část webu;
- vložte skript (lze jej nalézt na oficiálních stránkách projektu a ve zdrojích třetích stran).
Závěr
Poté se v pravém dolním rohu objeví ikona, která uživatele přesune úplně nahoru na stránku.
Jak vidíte, nastavení tlačítka Zpět pro žádný z CMS nebylo nijak zvlášť obtížné. Můžete použít jak automatizovanou metodu instalace (pluginy), tak i manuální. Poslední možnost však zůstává nejvhodnější, protože neovlivňuje nepříznivě výkon webu.
Pro web HTML můžete použít tlačítko „zpět na začátek“, abyste minimalizovali spotřebu zdrojů webu, protože velký počet rozšíření může mít negativní dopad na výkon zdroje. Jeden plugin tlačítka "nahoru" nebude moct moc ovlivnit dobu načítání stránek webu, ale ve většině případů má uživatel na CMS nainstalovaný minimálně tucet pluginů. V tomto případě může jakýkoli plugin nepříznivě ovlivnit výkon stránek daného webu.
