Tlačítko "Nahoru" pro web: jak to udělat
Tato funkce, jako tlačítko "nahoru" pro web,dělá internetový zdroj pohodlnější pro své návštěvníky. Umožňuje snadné přesunutí od kteréhokoli místa na stránce až k jeho vrcholu. To je jen nutné pro online obchody a weby s velkými články, které vyžadují dlouhé posouvání dolů.
Co to je?
Momentálně na většině místjako tlačítko "nahoru", ne, a není o tom nic kritického. Jeho využití však může přinést mnoho plusů jak pro internetový zdroj, tak pro jeho návštěvníky.
Výhody pro návštěvníky
Často se stává, když je stránka internetového zdrojeje silně zatížen množstvím informací, když informační článek zaberá spoustu místa a musíte pomocí kolečka myši posunout stránku dolů. Kromě toho může na konci článku existovat mnoho připomínek.
Když návštěvník čte článek, nicnudné procházení stránky není, ale když text skončí a je třeba se pohybovat nahoru, začne se trochu unavit. Většina lidí bude jednoduše příliš líná, aby vedla dlouhý svitek, a oni prostě zavřou místo, místo aby se stále procházeli přes jeho rozlohy.
Použití tlačítka pro okamžité přesunutí do horní části stránky usnadňuje práci na webu.
Výhody pro internetový zdroj
Jsou to pozitivní stránky zdrojez předchozích faktorů, protože to přehlednější místo zlepšuje behaviorální faktory, jako všichni návštěvníci budou aktivnější při své činnosti a přesunout na jiné stránky.
Takže tyto behaviorální faktory ovlivňují přístup všech vyhledávačů k webu a vedou ke zlepšení umístění výsledků vyhledávání.
Jak vytvořit tlačítko "nahoru" na webu sami
Chápeme dále. Tlačítko pro posun nahoru pro web na libovolném z CMS může být vždy provedeno sami, jen několik málo velmi jednoduchých kroků:
- vytvoření obrazu;
- Vytvoření skriptu;
- vytvoření stylu tlačítka;
- přidání k webu.
Obrázek tlačítka
Přidání tlačítka "nahoru" na webu, probudete muset vytvořit ikonu samotnou, když kliknete, uživatel posune stránku nahoru. Chcete-li to provést, můžete použít hotové možnosti, mezi nimiž můžete vždy vybrat nejvhodnější.
Chcete-li zlepšit vzhled tlačítka, musíte provést nějaké vylepšení, jmenovitě vytvořit sprite, což vám umožní kombinovat obrázky na pozadí na základě CSS, čímž vytvoříte animaci z nich.
Pro grafické práce můžete použít libovolný editor. Ale nejvhodnější volbou bude online služba PIXLR, protože zde nemusíte stahovat nic a můžete je použít přímo ve svém prohlížeči.
Chcete-li začít pracovat v zobrazeném editorovém okně, vyberte pole "Nahrát obrázek z počítače". Jako příklad uveďte obrázek rakety.
Pokud je velikost vybrané ikony příliš velká, pakbudete muset provést malou úpravu velikosti. Chcete-li to provést, přejděte do horní nabídky a vyberte pole "Upravit" a poté klikněte na tlačítko "Free transform ..."
Další vedle obrázku jsou zvláštníznačky, které můžete změnit velikost obrázku. Chcete-li uložit proporce, můžete použít klávesu Shift, tím, že ji upnete, je třeba přesunout modré značky. Na konci těchto akcí se získá obrázek rakety.
Dalším krokem je vytvoření kopie vrstvy.
Nyní musíte přesunout obrázek raketynová vrstva trochu nahoru. Chcete-li to provést, 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íte udělat nejvyšší obrázek v černé a bílé barvě. To lze provést pomocí položky "Korekce" - "Hue / Saturation" v horní nabídce. Pro úplné zbarvení musí být posuvník Saturace nastaven na -100. Tato akce způsobí, že se tlačítko "Nahoru" změní z černobílé na barvu, když jej umístíte.
Konečným dotykem je odstranění přebytečného prostorukolem dvou obrázků. Chcete-li to provést, vyberte položku "Oříznout" v levém menu a vyberte pouze dvě střely v obdélníku. Chcete-li oříznutí provést, stiskněte klávesu Enter.
Výsledkem je obraz, ve kterém není nadbytečný prostor. Bude nutné zaznamenat šířku a výšku výsledného obrazu, protože tato data budou užitečná v dalším kroku.
Pro uložení klikněte na "Soubor""Uložit", kde v levém položce "Můj počítač" zapíšeme název obrázku (pouze anglické rozložení), vyberte formát (v tomto případě - PNG) a klikněte na tlačítko "Ano".
Soubor s tlačítkem nahoru
V tomto případě nemusíte psát skript. Bude možné využít možnosti veřejnosti a provést některé opravy hotového kódu.
Chcete-li to provést, musíte si stáhnout libovolný editor kódu. Nejpopulárnější a bezplatná verze je Notepad ++. Po instalaci je třeba zkopírovat a vložit do něj celý kód:
| <script typ = "text / javascript"> $ (dokument).ready (function () {$ (window) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ( "# scroller") fadeIn () ;.} else {$ ( „# scroller ") fadeOut ().}}); $ (" # scroller ") Ctrl (function () {$ (." body, html „) živý ({scrollTop :. 0}, 400); return false;} );}); </ script> |
Pak klikněte na horní nabídku "Soubor" - "Uložitjako ... ", pak kód uložíme ve formátu .js. Poté můžete na svém webu použít tento kód a nahrát soubory a obrázky skriptu do něj pomocí připojení FTP.
Instalace na webu
Chcete-li pro toto místo nastavit navigační tlačítko, musíte kód umístit na požadované místo. Musíte ji zadat před značku </ body>.
Vytvoření stylu tlačítka v CSS
Nejčastěji se tlačítko "nahoru" pro stránky nachází v dolní části ("suterén").
V souboru site.css webu musíte zadat následující kód:
"/ * Nahoru tlačítko * / .scrollTop { |
V takovém případě potřebujete šířku a výšku dat. Zbývá pouze zadat data do kódu a tlačítko "nahoru" pro web bude připraveno! Co jiného?
Up tlačítko pro stránky Wordpress
Pro toto CMS lze tlačítko "nahoru" provést pomocí zásuvných modulů i nezávisle.
Metoda plugins nejpohodlnější a snadno se instaluje, protože by to vyžadovalo jen klikněte na tlačítko instalovat a konfigurovat všechny funkce menu plugin.
Výběr z nich by měl být osloven odopatrně, protože spolu s ním bude možné na místě snadno získat virus. Nejpopulárnější a nejsilnější volbou je plug-in s názvem Scroll Back to Top. Můžete si jej stáhnout pomocí standardního vyhledávacího modulu Wordpress plugin.
Toto rozšíření má vícefunkční a bude velmi jednoduché přizpůsobit tlačítko "nahoru" pro stránky v aplikaci Wordpress. Všechny hodnoty nemusí být vůbec změněny, stačí nakonfigurovat vzhled a umístění tlačítka na stránce webu.
Jak můžete vidět, nastavení tlačítkapluginy je velmi jednoduché. Existuje však jeden důležitý nuan, že každý nainstalovaný plugin načte CMS. To může ovlivnit rychlost internetového zdroje. Proto se většina majitelů stránek pokusí provést všechny změny přímo v kódu, a nikoli pomocí rozšíření třetích stran. Tlačítko "up" pro stránky můžete vytvořit v HTML, což minimalizuje spotřebované zdroje.
Před změnou všech systémových souborů musí WordPress vytvářet záložní kopie. Dále můžete postupovat podle kroků k vytvoření vlastního tlačítka popsaného výše.
Knoka "up" pro Joomlu
Joomla CMS také podporuje instalaci pluginů, stejně jako Wordpress. Nejúspěšnější volbou pro tlačítko pro stránky Joomla 3 je rozšíření s názvem Začátek stránky.
V tomto CMS může být každý plugin nainstalován prostřednictvím "Extension Manager". K tomu potřebujete:
- stáhnout plugin na internetu;
- klikněte na tlačítko "Procházet" v správci rozšíření;
- vybrat stažený archiv;
- Klikněte na tlačítko Stáhnout a nainstalujte.
Nyní ji musíte aktivovat v "Správci pluginů". Chcete-li to provést, přejděte do této části, najděte plugin a přepněte jeho stav na "on".
Dále následuje konfigurace všech parametrů rozšíření pomocí stejné sekce, kde potřebujete najít "Hlavní parametry" tohoto plug-inu na pravé straně.
Horní část stránky má následující funkce:
- Spusťte v / administrátoru - povolte možnost nejen v prostředku Internet, ale také v samotném panelu CMS Joomla.
- Tlačítko odhalení tlačítka - kolik pixelů musí uživatel odvíjet, aby se zobrazilo tlačítko nahoru.
- Vypustit text tlačítka - přítomnost textu na tlačítku.
- Vždy nahoře - stránka webu bude zobrazena po celou dobu od začátku. Pokud používáte kotvy k posunutí na určité místo na stránce, nemusí být tato volba aktivována.
- Hladké posouvání - umožňuje rolovat stránku hladší.
- Délka posouvání - doba, po které je stránka úplně přesunuta na začátek.
- Scroll Transition - přidává posouvání pro skvělé vizuální efekty.
- Přechodové uvolnění - "uvolnění" se přesune do horní části stránky.
- Poloha spojení - umístění ikony. Standardně se toto tlačítko nachází v pravém dolním rohu.
- Použití stylů je styl jednotlivých tlačítek, který lze nastavit v níže uvedeném poli. Pokud se přepne na zápornou hodnotu, pak budou všechny parametry stylu převzaty z aktivního tématu webu.
- Link Style - pole pro zadání vlastních parametrů stylu tlačítka.
Chcete-li nezávisle nastavit styl tlačítka "nahoru", musíte mít alespoň minimální znalosti o CCS. V opačném případě stojí za to přepnout hodnotu předposledního parametru na hodnotu "Ne".
Dalším důležitým nuánem je toobvyklý nápis na ikoně obsahuje anglický text: Zpět na začátek. Na webu ruského jazyka nemůže být takový text přítomen, takže jej jednoduše deaktivujte v nastavení pluginu nebo jej změňte na ruštinu.
Chcete-li změnit tento nápis, musíte jítserver pomocí FTP nebo správce souborů vloženého do hostingu. Dále v adresáři "/ administrator / language / en-GB /" musíte najít soubor nazvaný "en-GB.plg_system_topofthepage.ini".
Před změnou textu změňte kódování tohoto dokumentu na utf-8. Toto provede normální zobrazení ruských písmen.
Dále nalezneme tento řádek:
| "PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Zpět 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!".
Nakonec budete muset uložit upravený soubor a zkontrolovat přítomnost tlačítka "nahoru" pro stránku Joomla.
Tlačítko Ucoz nahoru
Tlačítko nahoru pro místo Ucoz bude nutné provéstpomocí kódu injekce, protože plug-iny nemohou být připojeny k tomuto CMS. Nebude to ale trvat dlouho, než budete studovat soubory systému a hledat potřebné řádky, stačí jen vložit malý kód na správném místě.
Pro instalaci budeme potřebovat:
- přejděte na "Ovládací panely -> Návrh -> Správa návrhů (šablony) -> Spodní část stránky;
- vložte skript (lze nalézt na oficiálních stránkách projektu a zdrojů třetích stran).
Závěr
Poté se v pravém dolním rohu objeví ikona a přesune uživatele na úplný vrchol stránky.
Jak můžete vidět, nastavte tlačítko "Up" prožádný z CMS nebyl obzvláště obtížný. Může být použita jako automatizovaná metoda instalace (plug-iny) a manuální. Poslední možnost však zůstává nejvhodnější, protože nepříznivě neovlivňuje rychlost místa.
Můžete použít tlačítko nahoru pro webHTML, aby se minimalizovala spotřeba zdrojů na webu, protože velký počet rozšíření může mít negativní dopad na rychlost zdroje. Jedna zásuvka tlačítka "nahoru" nebude moci výrazně ovlivnit dobu načítání stránek webu, ale ve většině případů má uživatel v CMS alespoň deset zásuvných modulů. V takovém případě může každý plugin nepříznivě ovlivnit výkon stránek stránek.
</ p>>
