Přejít na klíč o stránku nahoru. Pomocí jQuery vytvořte tlačítko „Zpět na začátek“ nebo Posun nahoru

| 09.10.2014

Tlačítko "Zpět na začátek" se velmi často používá na webech, kde je mnoho dlouhých stránek. Když uživatel prohlíží velký článek, galerii obrázků, novinky v sociální sítě atd., se chce vrátit na začátek stránky, buď dlouze roluje (což není příliš pohodlné), nebo stiskne klávesu Home na klávesnici, případně použije speciální tlačítko „Zpět na začátek“.

Výhodou tohoto tlačítka je, že může fungovat na tabletech a chytrých telefonech a ve všech ostatních případech, kdy nemáte po ruce klávesnici. Navíc o tom nemusí vědět všichni uživatelé užitečná funkce Klávesy Home a tlačítko na webu jsou vždy viditelné, okamžitě vidíte, k čemu slouží. Druhým plusem je, že toto tlačítko lze vylepšit a udělat tak, aby uživatele vrátilo na místo na stránce, odkud se dostal nahoru. Právě tuto verzi tlačítka dnes vyrobíme. Můžete si prohlédnout ukázku a také si stáhnout ukázkový soubor do svého počítače.

Část CSS, která se zabývá stylizací tlačítek, vypadá takto:

InTop ( pozice: pevná; vlevo: 0px; nahoře: 0px; šířka: 20 %; výška: 100 %; neprůhlednost: 0,5; filtr: alpha(opacity=50); kurzor: ukazatel; zobrazení: žádné; ) .inTop:hover ( background-color: #f5f4f4; opacity: 1; filter: alpha(opacity=100); ) .inTop span ( display: block; width: 100%; margin-top: 20px; text-align: center; font-size : 110 % barva: #52466a; font-family: Georgia, Times;

Dalším krokem je kód JavaScript. Pro usnadnění byly dovnitř přidány komentáře s vysvětlením:

// deklarace proměnných: var BottomPosition = 0; // pozice stránky var BottomFlag = false; // příznak pro zobrazení tlačítka GO TO BOTTOM var AnimateFlag = false;// Příznak pro provedení animace $(document).ready(function() ( $(".inTop").click(function() ( // klik na tlačítko GO TO TOP/GO TO BOTTOM AnimateFlag = true // animace se provede if(BottomFlag) ( // pokud je stisknuto tlačítko GO TO BOTTOM... $("body,html").animate(("scrollTop); ":BottomPosition), 200, function() ( // ...vrátí se na požadované místo na stránce rychlostí 200 AnimateFlag = false; // animace skončila )); // nahraďte tlačítko $(" .inTop span").html ("GO TO TOP"); else ( // pokud je stisknuto tlačítko GO TO TOP... $("body,html").animate(("scrollTop":0), 200 , function() ( // . ..vrátí se na začátek stránky rychlostí 200 AnimateFlag = false )).html("GO TO BOTTOM" // kontrola při rolování). stránka: $(window).scroll(function(event) ( var countScroll = $(window).scrollTop ();

));

Krok 3. HTML

Zbývá pouze vytvořit tlačítko v HTML:

PŘEJÍT NAHORU

To je vše, připraveno je jednoduché, ale velmi pohodlné tlačítko Zpět na začátek pro stránky s funkcí návratu. Sami si můžete upravit jeho styl, který bude vyhovovat vašemu webu. Přejeme vám kreativní úspěch a spokojené uživatele! Na stránkách s velkým množstvím obsahu (například blogy) stačí použít tlačítko "Zpět na začátek". Koneckonců, uživatel, který četl dlouhý článek, se možná bude muset vrátit

Proto se pro usnadnění navigace na webu používá tlačítko pro posun stránky. Takové tlačítko můžete vytvořit bez použití JavaScriptu (pouze s pomocí CSS), a tak s ním. Podívejme se na nejjednodušší implementace těchto metod.

Výhoda tato metoda- snadné použití (není třeba používat další knihovny nebo skripty).

Horní tlačítko s CSS - "Nubex" .topNubex ( pozice: pevná; vpravo: 45px; dole: 45px; ) Nahoře

Nevýhodou této metody je, že v tomto případě nemůže být scrollování plynulé a návštěvník je okamžitě přesměrován na začátek stránky.

Níže uvedená metoda používá knihovnu JQuery. Snadno se používá a umožňuje plynulé posouvání stránky.

Horní tlačítko pomocí JavaScriptu - "Nubex" #topNubex ( pozice: pevné; vpravo: 45px; dole: 45px; ) $(function() ( $(window).scroll(function() ( if($(this) .scrollTop( ) != 0) ( $("#topNubex").fadeIn(); ) else ( $("#topNubex").fadeOut(); ) ));click( function()); ( $("body,html").animate((scrollTop:0),700); ));

Tento příklad používá obrázek jako pozadí tlačítka. Zobrazení tlačítka si můžete přizpůsobit pomocí CSS stylů (velikost, barva, obrys, průhlednost atd.). Tato metoda je tedy flexibilnější a poskytuje více možností při přidávání tlačítka „Zpět na začátek“ na váš web.

Tlačítko "Zpět na začátek" je něco, co mnozí z vás pravděpodobně viděli na mnoha webových stránkách. Toto je šipka, která se zobrazuje v pravém dolním rohu webové stránky při posouvání. Po kliknutí se vrátíte zpět na začátek stránky. Pokud chcete přidat tlačítko Zpět na začátek jako součást procesu návrhu webových stránek nebo jen přemýšlíte, jak si jej můžete vytvořit sami, vítejte na palubě!

Náš kód se bude skládat ze dvou částí, CSS styly a malý skript jQuery. Začněme CSS.

Začneme vytvořením stylů a označení pro naše tlačítko. Zde je část HTML:

< link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >

< a id= "tlačítko" >

Tlačítko se bude skládat pouze z jednoho kotvícího tagu s id tlačítkem. Zahrnujeme také odkaz na knihovnu FontAwesome, abychom mohli použít ikonu pro naše tlačítko.

Počáteční styly pro tlačítko budou vypadat takto:

#button ( display: inline-block; background-color: #FF9800; width: 50px; height: 50px; text-align: center; border-radius: 4px; margin: 30px; position: fixed; bottom: 30px; right: 30px; přechod: barva pozadí .3s; z-index: 1000;

Protože tlačítko je prvek svazku a svazky jsou ve výchozím nastavení vložené prvky, musíme změnit vlastnost zobrazení na vložený blok, abychom mu mohli přiřadit velikost.

Udělejme čtvercové tlačítko 50x50 px se 4px zaoblenými rohy. Dáme tomu jasně oranžovou barvu a 30px na každé straně. Pevná poloha vždy umožňuje našemu tlačítku zůstat na stejném místě, když posouváme stránku, a z-index je tak vysoký, že tlačítko vždy překrývá ostatní prvky webu. Když na tlačítko najedeme, kurzor se změní na ukazatel a pozadí se změní na tmavě šedé. Aby byl přechod hladký, nastavíme u vlastnosti background-color přechod na 0,3 sekundy. Také, když stiskneme tlačítko, změní se také barva pozadí a bude trochu světlejší.

Nyní je naše tlačítko prázdné, přidáme k němu ikonu. Uděláme to přidáním prvku ::after pseudo= takto:

#button::after ( content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 2em; line-height: 50px; color: #fff; )

Vybereme ikonu z nejpopulárnější knihovny písem FontAwesome. Začněme ikonou Chevron Up.

Chcete-li jej zobrazit v pseudoprvku, nastavte značku font-family na FontAwesome a přiřaďte své ikoně v contentu hodnotu Unicode.

Také se ujistěte, že výška vaší čáry je rovna výšce vaší ikony, pokud chcete, aby byla vystředěna vodorovně.

V této podsekci si povíme, jak vlastně tlačítko zprovoznit. Nejjednodušší způsob, jak toho dosáhnout, je použít knihovnu jQuery JavaScript. Nejprve musíme přidat jQuery do značky HTML. Přidejte tento řádek těsně před koncovou značku těla.

< script src=" https:// cdnjs. mračna. com/ ajax/ libs/ jquery/3.1.1/ jquery. min. js">

Nyní můžeme napsat náš skript pomocí syntaxe jQuery. Přidejte tento skript za řádek jQuery:

jQuery(document).ready(function() ( var btn = $("#tlačítko"); $(window).scroll(function() ( if ($(window).scrollTop() > )); btn.on ("click", function(e) ( e.preventDefault(); $("html, body").animate((scrollTop:0), "300"); ));

Pojďme se na tento skript podívat blíže. Pravděpodobně jste si všimli prvního řádku kódu:

jQuery(dokument).připraveno(funkce () (

Kód uvnitř této funkce byste měli spouštět pouze v případě, že je dokument plně načten. Je to skvělý způsob, jak předejít chybám, pokud váš kód JavaScript chce provést změny v částech webové stránky, které nejsou plně načteny v prohlížeči. Kód, který spustíme po úplném načtení dokumentu, se skládá ze dvou hlavních bloků kódu, z nichž každý vykonává svou vlastní práci. První část skriptu způsobí, že se naše tlačítko objeví a zmizí poté, co rolování stránky dosáhne určitého bodu. Druhá část způsobí, že se stránka po kliknutí na tlačítko posune nahoru. Podívejme se na každou z nich podrobně.

Zde je kód, který je zodpovědný za tuto funkci:

Var btn = $("#tlačítko");

$(window).scroll(function() ( if ($(window).scrollTop() > 300) ( btn.addClass("show"); ) else ( btn.removeClass("show"); ) ));

Nejprve deklarujeme proměnnou btn a přiřadíme jí ID tlačítka, abychom na ni mohli později v kódu snadněji odkazovat. Pomáhá také JavaScriptu provádět výpočty rychleji. Jakmile prvek uložíme do proměnné, JavaScript nebude muset prohledávat celou stránku mnohokrát, když jej budeme potřebovat znovu použít v našem kódu.

jQuery má praktickou funkci .scroll().

Sváže kus kódu, který se spustí pokaždé, když se na vaší webové stránce objeví rolování. Funkce, která se provede při každém rolování stránky, vyžaduje jeden parametr. Můžete jej použít na jakýkoli rolovací prvek, jako jsou rámečky a prvky s dalšími vlastnostmi nastavenými na rolování.

Obvykle jej aplikujeme na prvek okna, protože tam ve většině případů dochází k posouvání, včetně našeho příkladu.

$ (okno). scroll(funkce()(

Do funkce vložíme příkaz if/else:

Abychom získali aktuální pozici posuvníku, použijeme vestavěnou metodu .scrollTop() jQuery. Jednoduše vrátí několik pixelů, které jsou skryté nad posouvatelnou oblastí.

Takže pokaždé, když stránku posouváme, JavaScript zkontroluje, kolik pixelů je skrytých, a porovná je s počtem. V našem případě je toto číslo až 300, ale pokud chcete, můžete jej změnit.

Pokud přejdeme na 300 pixelů, přidáme k našemu tlačítku třídu show, díky které se zobrazí. Pokud je číslo menší než 300, tuto třídu odstraníme. Přidávání a odebírání tříd je dalším důvodem, proč je jQuery populární. Můžeme to udělat pomocí dvou jednoduchých metod addClass() a removeClass(). V našem CSS však zatím třídu show nemáme, tak ji přidáme:

$ (okno). scroll(funkce()(

Ve výchozím nastavení bude vaše tlačítko skryté, takže do prvku #button musíme přidat několik dalších pravidel:

#button ( přechod: barva pozadí .3s, neprůhlednost .5s, viditelnost .5s; neprůhlednost: 0; viditelnost: skrytá; )

Aby byl přechod plynulý, přidejte k atributu přechodu další dvě hodnoty, opacity a viditelnost, nastavené na 0,5 sekundy.

Druhá část skriptu umožňuje po stisknutí tlačítka jít nahoru.

Btn.on("click", function(e) ( e.preventDefault(); $("html, body").animate((scrollTop:0), "300"); ));

První metoda jQuery, kterou zde vidíme, je on() .

Jeho prvním parametrem je JavaScriptová událost „click“, která se objeví pokaždé, když klikneme v našem prohlížeči. Druhým parametrem je funkce zpracování, která se spustí, jakmile dojde k události.

Funkce zpracování přijímá parametr události. Můžeme si to pojmenovat, jak chceme, ale obvykle se dává přednost e nebo event. Potřebujeme parametr události k předání funkci a jeho použití pro metodu preventDefault(). Metoda e.preventDefault() zabrání tomu, aby událost provedla něco náhodného, ​​například aby nás odkaz nepřevedl na další stránku. V našem případě to není kritické, protože náš prvek kotvy nemá atribut href a stejně by nás k tomu nevedl nová stránka

, ale vždy je lepší zkontrolovat.

Metoda jQuery .animate() je ta, která dělá celý trik.

$("html, tělo").animate((scrollTop:0), "300"); První parametr metody .animate() je seznam vlastností, které bychom měli animovat. Naše vlastnost se nazývá scrollTop a chceme, aby měla hodnotu 0. Typ tohoto parametru je takže musíme použít složené závorky a zapsat naše hodnoty pomocí syntaxe páru klíč/hodnota.

Druhým parametrem je rychlost, se kterou chceme, aby se naše animace spustila. Měří se v milisekundách a čím vyšší číslo, tím pomalejší animace. Výchozí hodnota je 400, ale změňme ji na 300.

Nakonec aplikujeme metodu animace na prvky HTML a body na naší stránce.

Nyní, když na tlačítko klikneme, vrátíme se zpět na začátek stránky.

Finální verzi si můžete prohlédnout v ukázce CodePen. Zahrnul jsem také ukázkový text pro demonstrační účely.

Podívejte se na kód tlačítka Zpět na začátek od Matthewa Caina (@matthewcain) na CodePen.

Tlačítko „Zpět na začátek“ je užitečným nástrojem při návrhu rozhraní stránky. A pokud ho váš web má, bude interakce návštěvníků s webem mnohem pohodlnější. Tato příručka vám pomůže pochopit CSS a JavaScript, i když nejste webový vývojář. Doufám, že pro vás byl příspěvek užitečný a určitě se vám podaří takový knoflík vyrobit!

Tlačítko „Zpět na začátek“ nebo „ “ je oblíbeným a užitečným prvkem na stránkách moderních webových stránek, zejména pokud tyto stránky obsahují hodně obsahu.
Za prvé, tyto obecně zlepšují použitelnost webu. Když si uživatel přečetl velké množství obsahu a posouvá se na konec stránky, aby se vrátil na začátek webu, použije standardní rolování. Aby bylo zajištěno, že uživatel bude automaticky přesměrován na začátek stránky, používají vývojáři a správci stránek, kteří myslí na své návštěvníky, různé varianty tlačítek „Zpět na začátek“. Těch může být nejvíc jednoduchá řešení bez použití jakýchkoliv dalších knihoven nebo skriptů, stejně jako s rozšířenou funkčností, s připojením knihovny a malého prováděcího skriptu.

Tlačítka „Zpět na začátek“ jsou navržena různými způsoby, mohou to být banální textové odkazy, klasicky vypadající tlačítka, kulatá tlačítka se šipkou nebo mohou používat obrázek příslušného typu. Nejčastěji tato tlačítka vypadají staticky, někdy mění barvu pozadí a písmo méně často, vývojáři používají efekty animace;

Dnes, na jednoduchý příklad, podívejme se, jak můžete pomocí CSS animace přidat trochu pohybu vyskakovacímu tlačítku „Zpět na začátek“ a zároveň se podíváme na samotný skript obsahující události jQuery nezbytné pro fungování tlačítka.

Chcete-li na svém webu povolit tlačítko, není nutné do označení přidávat žádné značky HTML stránky. Stačí připojit knihovnu jQuery a napsat malý spustitelný js a tlačítko bude fungovat. Vzhled a animaci vytvoříme pomocí CSS připojením souboru style.css k html dokumentu.

Pokud tedy váš web ještě nemá připojenou knihovnu jQuery, lze to snadno provést připojením aktuální verze přímo ze sítě pro doručování obsahu (CDN) Google, vše, co musíte udělat, je přidat následující řádek před uzavírací značku:

Níže, přímo pod tímto řádkem, umístěte malý spustitelný soubor js, který zobrazí naše tlačítko s určitým zpožděním a také provede svou hlavní funkci, hladce vrátí uživatele na začátek stránky.

jQuery(document).ready(function($)( var //rychlost posouvání na začátek stránky rychlost = 500, //html rozložení tlačítka $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), rychlost )); //nastavení režimu vzhledu funkce tlačítka show_scrollTop() ( ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut (600) ) $(okno).scroll(funkce() ( show_scrollTop(); ));

Ke scénáři jsem přidal nějaké komentáře, abych tak řekl, pro větší pochopení. Jak jsem psal výše, tato metoda eliminuje potřebu přidávat jakékoli značky do označení stránky HTML, skript to dělá dokonale. Když uživatel posune stránku dolů o 300 pixelů, plugin zapíše značku tlačítka, v našem případě to je:

v těle stránky, vše na stejném místě před uzavírací značkou.

Pro plynulé zobrazení a skrytí tlačítka používáme funkce .fadeIn () a .fadeOut () s danou rychlostí 600 milisekund. Rychlost rolování na začátek stránky je nastavena na 500 milisekund.

K označení tlačítka jsem použil značku , na odkaz, na který jsem zadal hash (hash), atribut title - po najetí myší na tlačítko se zobrazí standardní tooltip, přiřazena určitá třída s názvem selektoru scrollTop a použito písmo ikony z písma Úžasný balíček jako kotva odkazu .
Nyní, když známe název selektoru, přímo v CSS, pomocí určitých vlastností, animujeme naše tlačítko, vytvoříme vzhled, určíme, kde se na stránce objeví, a také připojíme animaci.
Uvnitř css kódu jsem přidal podrobné komentáře téměř ke každé vlastnosti, takže nevidím smysl vše podrobně popisovat, samostatně se pozastavím nad efektem animace a propojováním ikon písma jako prvku tlačítka.
Ikona může být jiná, ne stejná jako v příkladu, hlavní věc je, že odpovídá přímému účelu tlačítka, v našem případě je to jakýkoli indexový symbol, například jednoduché šipky, objemné nebo tenké, s nebo bez výplně, jasně udávající směr rolování při kliknutí na tlačítko.
Abyste mohli používat ikony Font Awesome, není potřeba stahovat celý balíček, je možné knihovnu přímo propojit například s Bootstrap CDN, k tomu v sekci HTML stačí napsat následující řádek:

Po připojení Font Awesome je můžete použít v HTML kódu nebo jako v našem případě v js pomocí speciálních tříd, základní fa a třídy pro konkrétní typ ikony, v našem případě je to fa-angle-double-up . Třídu konkrétní ikony můžete zjistit na webu.
Vzhled kontejneru ikon, velikost a barva pozadí, umístění, barva a velikost písma, to vše se určuje přímo v css se zaměřením na selector.scrollTop i

/* tvoří tělo tlačítka, pozice a přechodový efekt */ .scrollTop ( /* ve výchozím nastavení skrytý */ zobrazení: žádné; /* zaoblené rohy */ -webkit-border-radius: 100 %; -moz-border-radius: 100% -ms-poloměr-poloměr: 100%; * zobrazení kurzoru */ kurzor: ukazatel /* ​​přechodový efekt mezi dvěma stavy tlačítka */ -webkit-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1 -moz-transition: bottom 0.2s cubic-); bezier(0,42, 0, 0,58, 1) -ms-přechod: spodní 0,2s kubický-bezier(0,42, 0, 0,58, 1) kubický-bezier(0,42, 0, 0,58, 1); cubic-bezier(0,42, 0, 0,58, 1) /* posun tlačítka nahoru při umístění kurzoru */ .scrollTop:hover ( bottom: 2rem ) / * další prvky designu tlačítka */ .scrollTop:before, .scrollTop:after ( obsah : "" nahoře: 0; barva pozadí: #766DCC;

Zbývá zvážit samotnou animaci. Efekt animace se neaplikuje na celé tlačítko, ale na další pseudoprvky:after a:before . Chcete-li vytvořit CSS animaci, musíte do stylů těchto prvků přidat vlastnost animace, která vám umožní definovat název, upravit zrychlení a trvání animace a také další podrobnosti o tom, jak má animace plynout. Vzhled animace se konfiguruje pomocí @keyframes, sady klíčů, které konfigurují snímky animace.

V našem příkladu je název animace clickMe, trvání je 1,8 s, zpoždění je 333 ms pro:before a 777ms pro pseudo-prvek:after. Dále určíme počet opakování animace - infinite infinite a typ animace na začátku - zrychlení.

Poté, co jsme nastavili dočasné vlastnosti animace, zbývá určit vzhled animace, to se provádí uvnitř bloku @keyframes. Nejprve je uveden název animace a poté jsou její kroky popsány ve složených závorkách. Z ukázky kódu je vidět, že jsou použity rámce vlastnosti opacity (průhlednost) a transformace transformačního prvku pomocí funkce scale - měřítko prvku. Kroky animace jsou specifikovány pomocí procent.
Animace Vlastnosti CSS popsány samostatně pro prohlížeče webkit @-webkit-keyframes a Prohlížeč Mozilla Firefox @-moz-keyframes, aby se animace nezobrazovaly v těchto webových prohlížečích nesprávně.

To je vše. Ještě jednou se podívejte na živý příklad toho, jak funguje tlačítko „Zpět na začátek“, a pokud jej potřebujete, stáhněte si zdrojový kód zabalený v archivu a zveřejněný v cloudu na Y.Disk.

S pozdravem Andrey

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ý posun dolů.

Na momentálně Na většině webů neexistuje žádná taková funkce jako tlačítko „nahoru“ a není na 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.

Č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 stránku posouvat dolů pomocí kolečka myši. Kromě toho k němu může být na konci článku mnoho komentářů.

Když si návštěvník čte článek, není nic zdlouhavého na posouvání stránky dolů, ale když se text dostane na konec a vy se musíte posunout nahoru, začíná 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 potulovali po jejích rozlohách, jednoduše web zavřou.

Použití tlačítka pro okamžitý přesun na horní část stránky vám usnadní práci na webu.

Pozitivní aspekty pro samotný zdroj pocházejí z minulých faktorů, protože zjednodušená navigace po 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.

Data tak ovlivňují postoj všech vyhledávačů k webu a vedou ke zlepšení jeho místa ve výsledcích vyhledávání.

• vytvoření obrazu;
• vytvoření skriptu;
• vytvoření stylu tlačítka;
• přidání na stránky.

Chcete-li na web přidat tlačítko „zpět na začátek“, musíte nejprve vytvořit samotnou ikonu, na kterou se po kliknutí přesune na začátek stránky. K tomu můžete použít hotové možnosti, mezi kterými si vždy můžete vybrat tu nejvhodnější.

Chcete-li zlepšit vzhled tlačítka, je nutné provést některá vylepšení, konkrétně vytvořit sprite, který vám umožní kombinovat obrázky na pozadí založené na CSS a vytvářet z nich 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 nemusíte nic stahovat a můžete ji používat přímo ve svém prohlížeči.

Chcete-li začít, v zobrazeném okně editoru musíte vybrat pole „Nahrát obrázek z počítače“. Vezměme si jako příklad obrázek rakety.

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...“

Dále se vedle obrázku objeví speciální značky, jejich posunutím můžete změnit velikost obrázku. Chcete-li zachovat proporce, můžete použít klávesu Shift, zatímco ji držíte, musíte pohybovat modrými značkami. Na konci těchto akcí se získá obraz rakety.

Dalším krokem je vytvoření kopie vrstvy.

Nyní je potřeba posunout obrázek rakety z nové vrstvy trochu nahoru. 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íte 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 dotekem je odstranění nadbytečného prostoru kolem dvou obrázků. Chcete-li to provést, vyberte v levém menu položku „Crop“ a vyberte pouze dvě rakety v obdélníku. Chcete-li provést oříznutí, stiskněte klávesu Enter.

Výsledkem je obraz, ve kterém není žádné zbytečné volné místo. Šířku a výšku výsledného obrázku si budete muset zapsat, protože tyto údaje se vám budou hodit v dalším kroku.

Chcete-li uložit, musíte kliknout na „Soubor“ - „Uložit“, kde do levé položky „Tento počítač“ zapíšeme název obrázku (pouze v angličtině), vyberte formát (v v tomto případě- PNG) a klikněte na tlačítko „Ano“.

V tomto případě není třeba psát skript. Bude možné využít veřejně dostupnou možnost provedením některých úprav hotového kódu.

Chcete-li to provést, budete si muset stáhnout libovolný editor kódu. Nejoblíbenější a také bezplatnou možností je Notepad++. Po instalaci do něj musíte zkopírovat a vložit celý tento kód:

Chcete-li nainstalovat tlačítko pro posun nahoru pro web, musíte kód umístit na požadované místo. Musíte jej zadat před značku .

Nejčastěji se tlačítko „nahoru“ pro web nachází ve spodní části („zápatí“).

Do souboru style.css webu musíte přidat následující kód:

V tomto případě budete potřebovat údaje pro šířku a výšku obrázku. Zbývá pouze zadat přijatá data do kódu a tlačítko „nahoru“ pro web bude připraveno! Co ještě?

U tohoto CMS lze tlačítko „Top“ vytvořit pomocí pluginů i samostatně.

Metoda pluginu je nejpohodlnější a nejjednodušší na instalaci, protože vše, co musíte udělat, je kliknout na tlačítko instalace a nakonfigurovat všechny funkce v nabídce pluginu.

K výběru posledně jmenovaného by se mělo přistupovat opatrně, protože spolu s ním můžete pro web snadno zakoupit virus. 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í pluginu Wordpress.

Toto rozšíření má více funkcí a bude velmi snadné přizpůsobit tlačítko "zpět na začátek" pro web Wordpress. Není nutné měnit všechny hodnoty, stačí pouze nakonfigurovat vzhled a umístění tlačítka na stránce webu.

Jak vidíte, instalace tlačítka „nahoru“ pomocí pluginů je velmi jednoduchá. Ale je tu jedna důležitá nuance, a to že všichni nainstalovaný plugin načte CMS. To může ovlivnit rychlost internetového zdroje. To je důvod, proč se většina majitelů webových stránek snaží provádět všechny změny přímo v kódu a nepoužívat je rozšíření třetích stran. Můžete vytvořit tlačítko „nahoru“ pro webovou stránku v HTML, což minimalizuje spotřebované zdroje.

Než všechny vyměníme systémové soubory Wordpress je potřebuje vytvořit zálohy. Dále můžete provést všechny kroky k vytvoření vlastního tlačítka popsaného výše.

CMS Joomla také podporuje instalaci pluginů, stejně jako Wordpress. Nejúspěšnější verzí tlačítka „top“ pro web na Joomla 3 je rozšíření nazvané Top of the Page.

V tomto CMS lze nainstalovat jakýkoli plugin prostřednictvím „Správce rozšíření“. K tomu potřebujete:

• stáhnout 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ů. Chcete-li to provést, musíte přejít do této sekce, najít plugin a přepnout jeho stav na „povoleno“.

Horní část stránky má následující funkce:

• Spustit v/ správce - povolení volby nejen na internetovém zdroji, ale také v samotném panelu Joomla CMS.
• Tlačítko Reveal Position – o kolik pixelů musí uživatel přetočit, 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 zobrazovat vždy od začátku. Pokud používáte kotvy k rolování na konkrétní místo na stránce, není nutné tuto možnost aktivovat.
• Plynulé posouvání – usnadňuje posouvání stránek.
• Scroll Duration – doba, po které se stránka úplně přesune na začátek.
• Přechod posouvání – přidává skvělé vizuální efekty posouvání.
• Ulehčení přechodu – „zmírnění“ pohybu na začátek stránky.
• Umístění odkazu - umístění ikony. Standardně je tlačítko umístěno v pravém dolním rohu.
• Use Styles - individuální styl tlačítka, který lze nastavit v poli níže. Pokud přepnete na zápornou hodnotu, budou všechny parametry stylů převzaty z motivu aktivního webu.
• Link Style – pole pro zadání parametrů vašeho stylu tlačítka.

Chcete-li si sami upravit styl tlačítka „nahoru“, musíte mít alespoň minimální znalosti CCS. V jinak Vyplatí se 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 ruském webu, 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 se přihlásit k serveru pomocí FTP nebo vestavěného hostingu správce souborů. 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 umožní normální zobrazení ruských písmen.

a změňte frázi v uvozovkách na ruštinu. Můžete použít fráze jako „Nahoru!“, „Na začátek!“ nebo "Nahoru!"

Tlačítko "nahoru" pro web na Ucoz bude muset být provedeno pomocí vkládání kódu, protože připojení pluginů pro tento CMS je nemožné. 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 požadované místo.

Pro instalaci budeme potřebovat:

• přejděte na „Ovládací panely -> Návrh -> Správa návrhu (šablony) -> Spodní část webu;
• vložte skript (lze najít na oficiálních stránkách projektu a zdrojích třetích stran).

Poté se v pravém dolním rohu objeví ikona, která přesune uživatele úplně nahoru na stránku.

Jak vidíte, instalace tlačítka „Zpět na začátek“ pro kterýkoli z CMS nebyla nijak zvlášť obtížná. Můžete použít buď automatizovanou metodu instalace (pluginy), nebo ruční. Poslední možnost však zůstává nejvhodnější, protože nemá negativní dopad na 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“ nijak výrazně neovlivní dobu načítání stránek webu, ale ve většině případů má uživatel na CMS nainstalován minimálně tucet pluginů. V tomto případě může jakýkoli plugin negativně ovlivnit výkon stránek webu.