Horní tlačítko pro WordPress – rychlý přechod na začátek stránky. Tlačítko nahoru pro WordPress – rychlý přechod do horní části stránky Stáhněte si plugin pro tlačítko nahoru dolů

Mnoho lidí chce mít na svých webových stránkách tlačítko „Zpět na začátek“. Toto je šipka, která umožňuje uživateli přejít na úplný začátek webu WordPress jedním kliknutím.

Osobně si myslím, že takové věci jsou nutné pouze v případě, že jsou příspěvky na stránkách hodně dlouhé. Koneckonců, pro návštěvníka bude nepohodlné neustále používat posuvník nebo myš! V této situaci je tlačítko „Zpět na začátek“ pro web WordPress prostě nezbytné!

Tento nápad můžete implementovat pomocí . Nabízím pouze jeden a nyní vysvětlím proč.

Faktem je, že jsem musel experimentovat s asi pěti pluginy a každý měl své významné nevýhody. Nakonec se nám podařilo najít slušnou možnost, která je jednoduchá a pohodlná v každém smyslu.

Mluvíme o pluginu pro tlačítko Nahoru – ToTop Link. Můžete si jej stáhnout prostřednictvím oficiálního vyhledávacího panelu pluginu v oblasti administrátora WordPress. (Pokud nevíte, jak na to, napište do komentářů, pomohu).

Je zvláštní, že tento soubor vlastností není přítomen v mnoha vývoji. Je však dobré, že alespoň jedna osoba vytvořila plugin pro tlačítka zpět nahoru pro web WordPress s flexibilním nastavením.

Dobrý den, milí čtenáři! Přemýšleli jste někdy, jak vytvořit tlačítko Zpět na začátek pro WordPress? Ne? Velmi marně. Koneckonců je to nejen krásná, ale také velmi užitečná věc. Toto tlačítko se zobrazí v pravém dolním rohu při posouvání stránky dolů. Klikněte na něj a stránka se plynule vrátí na svůj začátek. Takový velkolepý přechod na vrchol můžete ve WordPressu implementovat pomocí pluginu Dynamic To Top Options. Dnes vám o tom povím.

Můžete nastavit počet oznámení zobrazovaných na hlavní stránce a v sekcích blogu. Na mnoha blozích stačí i 5-7 oznámení, aby byla stránka docela dlouhá. A abychom čtenáře ještě jednou neotravovali a nenutili kolečko myši, byla vymyšlena výborná funkce - tlačítko, po jehož kliknutí se stránka automaticky posune nahoru na její začátek. Jednoduché, efektivní a pohodlné!

Samozřejmě, někdo se může podívat na tento úkos a říct, že je to zbytečné a pouze přidává další kód na stránku. V mnoha ohledech je to pravda, ale nezapomeňte na použitelnost webu, faktor chování a banální pohodlí. Tato maličkost může čtenáře zaujmout a udržet si ho jako předplatitele. Každý se ale rozhodne sám, zda si jej nainstaluje nebo ne.

Možnosti Dynamic To Top jsou standardní. Stáhněte si nejnovější verzi, rozbalte a nahrajte na server do adresáře /wp-content/plugins. Aktivujte a přejděte do nastavení, které se na rozdíl od většiny ostatních pluginů nachází v části „Vzhled“ - „Nahoru“.

Všechna nastavení jsou v angličtině, ale není těžké jim porozumět. Nyní vám s tím pomůžu.

První část nastavení se nazývá Behavior, což znamená vlastnosti.

Doba posouvání – nastavuje dobu, za kterou se stránka posune nahoru. Měřeno v milisekundách.

Vzdálenost prolínání – vzdálenost od horního okraje stránky, od které se objeví tlačítko „nahoru!“.

Easing – nastavuje plynulost rolování. Pokud se nepodíváte pozorně, těžko poznáte rozdíl, zvláště pokud je doba posouvání nastavena na nízkou hodnotu.

Pozice — pozice tlačítka na stránce. Na výběr jsou 4 pozice:

• vlevo nahoře - levý horní roh
• vpravo nahoře - vpravo nahoře
• vlevo dole - levý dolní roh
• vpravo dole - respektive vpravo dole

Zabránit na mobilu – zda ​​se má či nemá zobrazovat tlačítko nahoru v prohlížečích mobilních zařízení.

Zbývá pouze upravit vzhled tlačítka v části Vzhled nastavení pluginu Dynamic To Top Options. Je velmi výhodné, že všechny provedené změny lze vidět přímo tam na příkladu.

Textová verze - umožňuje psát text na tlačítko. Po zaškrtnutí políčka se zobrazí následující pole:

• Text tlačítka - text, používejte jednoduchá a srozumitelná slova - "Vzhůru!" "Na začátek stránky", "Nahoru!", "Nahoru", "Nahoru!", "Pojďme létat!" a tak dále;
• Velikost písma - velikost písma
• Barva textu — testovací barva. Stiskněte select pro vizuální výběr barvy;
• Tučný text - tučný styl;
• Textový stín - stín z písmen;
• Barva stínu textu — barva stínu.

Horní/spodní odsazení - odsazení nad a pod textem nebo obrázkem uvnitř tlačítka k jeho okrajům.

Tlačítko „zpět na začátek“ pro web je již dlouho povinným atributem.

Posuďte sami, čtete poměrně dlouhý článek. Dokončili jsme čtení, nyní musíme přejít na začátek webu. Můžete to udělat pomocí posuvníku v prohlížeči, ale jak vidíte, je mnohem pohodlnější kliknout myší a být nahoře s hladkým a úhledným efektem. Samozřejmě maličkost, ale jsou to právě tyto maličkosti, které utvářejí postoj k vašemu webu. A je pro vás příjemnější, když se podíváte na článek, ano, nebo prostě obdivujete svůj web. Pokud se to dělá s duší, samozřejmě.

Mnoho moderních motivů již má vestavěnou funkci tlačítka Zpět na začátek. Mohou to být šipky nebo nápisy s textem dle vašeho výběru. Nejvíce samozřejmě nejrůznější šípy. Úhledné, elegantní, jsou vždy po ruce, na vrchol se můžete kdykoli přesunout.

Existuje však názor, že již existují rozšíření pro moderní prohlížeče, kde si můžete takové tlačítko nainstalovat pro jakýkoli web. Ano, tato rozšíření existují pro Chrome i Fox. Mějte však na paměti, že na váš web přicházejí různí lidé. Existuje mnoho fanoušků IE; někteří jednoduše nechtějí instalovat další rozšíření do svých prohlížečů, jiní o takových možnostech prostě nevědí. Stručně řečeno, nebude to bolet; má smysl věnovat nějaký čas zlepšování výkonu vašeho webu.

Zde mám svůj vlastní názor, o který se s vámi rád podělím.

Existuje mnoho různých možností instalace tlačítka Top a mnohem více, a to samostatně. V zásadě není těžké napsat pár řádků kódu do potřebných souborů. Jedinou otázkou je – PROČ?

Existuje názor, že zbytečné pluginy ztěžují a zpomalují práci webu. To se přirozeně stává. Pokud jste se však již rozhodli provést nezbytný doplněk, jaký je rozdíl v tom, zda si kód napíšete sami, nebo zda bude přidán po instalaci potřebného pluginu? Počet příkazů se tak jako tak zvýší, kód skriptu bude každopádně vyžadovat nějaké prostředky na své zpracování. Pouze v jednom případě přidáte kód ručně, ve druhém toto přidání provede plugin.

A nezapomeňte na tento okamžik. Můžete nainstalovat kód, bude to fungovat. Ale za prvé, jak správně to bude pokračovat po aktualizaci motoru? Za druhé, kódy pluginů se neustále vylepšují. Probíhá diskuse, probíhá hledání chyb a závad. Vývojáři pravidelně aktualizují své pluginy, takže je mnohem pravděpodobnější, že budete mít optimalizovanější kód od profesionálního vývojáře, než když jej přidáte sami.

No, základní pohodlí. Tato verze tlačítka Zpět na začátek vás omrzela, deaktivovali jste plugin a nainstalovali další. Líbilo se mi to, bylo to super, ne, rychle aktivovali ověřený. Nemá smysl dělat povyk kvůli takové maličkosti, teď si musíte za šest měsíců pamatovat, co jste napsali do funkce.

Nebudu zde popisovat způsob instalace pomocí kódu, na přání lze tyto možnosti snadno najít na internetu.

Toto je dnes pravděpodobně nejoblíbenější plugin pro přidání tlačítka Zpět na začátek webu. Jakási klasika žánru. Instaluje a konfiguruje snadno a jednoduše.

Přejděte na Pluginy – Přidat nový, do vyhledávacího pole vložte tlačítko Posunout nahoru. Najdeme, nainstalujeme, aktivujeme.

Na záložce Vzhled se objeví položka Tlačítko pro posun na začátek, klikněte a prohlédněte si nastavení tohoto pluginu:

Jsou jen dva. Barevné provedení – tmavé nebo světlé. Velikost - velká nebo malá.

Vybíráme potřebné parametry a obdivujeme, jak se v pravém dolním rohu po nějakém pohybu dolů objeví šipka nahoru. Úhledný, hladký přechod v zásadě není potřeba nic jiného. Plugin je pravidelně aktualizován, takže kód bude vždy čerstvý a soudě podle recenzí nebude mít žádný vliv na rychlost webu.

Nezůstávejme jen u jednoho pluginu, pojďme se podívat, co dalšího pro naše tlačítko Top najdeme.

Zde je vidět úplně jiný obrázek. Tento plugin vám umožňuje změnit vzhled našeho tlačítka podle vašeho vkusu, barvy a velikosti. No, první věci.

Přejděte na Plugins – Add New, vložte JCWP Scroll To Top do vyhledávání, najděte, nainstalujte, aktivujte.

Nastavení pluginu již najdete na jiné záložce – Možnosti – JCWP Scroll To Top:

Do obrázku jsem nedal všechny nastavitelné parametry, bylo by to moc dlouhé.

Téměř vše je přizpůsobitelné.

• Délka animace;
• Po jakém počtu pixelů se objeví rolování;
• Pro tlačítko si můžete vytvořit svůj vlastní identifikátor;
• Efekt pro vzhled tlačítka;
• Poloha tlačítka;
• Text na tlačítku;
• Nastavení barvy pozadí, písma, velikosti písmen, barvy rámečku, zaoblení rohů;
• Zakázat pro mobilní zařízení;

Toto jsou nastavení. Jak vidíte, nebudeme mít hotový obrázek tlačítka, bude tvořen styly, které určíme. Pohodlné řešení, vhodné pro téměř jakýkoli design, zajímavé efekty pro vzhled.

Standardní instalační pluginy – Přidat nové – WPFront Scroll Top. Stáhnout, nainstalovat, aktivovat.

Nastavení pluginu najdete v záložce WPFront – Scroll Top:

Pro fanoušky grafických tlačítek tu máme opravdový Klondike. Výběr je opravdu slušný, pro každý vkus. Jsou zde jednoduché šipky s nápisy, průhledné, tmavé a světlé. Vyberte si, co se vám líbí.

• Můžete upravit počet pixelů pro zobrazení tlačítka;
• Můžete si vytvořit vlastní velikost tlačítka;
• Tlačítku můžete přidat průhlednost;
• Nastavení hladkosti pro vzhled tlačítka a pro pohyb nahoru;
• Vzhled tlačítka si můžete přizpůsobit pro mobilní zařízení;
• Nastavení umístění a odsazení tlačítka;
• Můžete nastavit adresu, na kterou bude uživatel po kliknutí na tlačítko chodit. Zvláštní možnost, i když, kdo ví, možná se to někomu bude hodit;

Obrázky jsou opravdu pěkné. Jsou přísní a jsou veselí, pro každý vkus.

Toto jsou pluginy, které vám pomohou snadno vytvořit potřebné a užitečné tlačítko Zpět na začátek na vašem webu. Hodně štěstí všem!

Tlačítko nahoru pro web – více než 7 osvědčených řešení – 4,6 z 5 na základě 73 hlasů

Tlačítko „Zpět na začátek“ hraje velkou roli při zlepšování uživatelského zážitku, zejména na těch stránkách, které jsou silně přeplněné obsahem. A protože je v dnešní době pro web nejdůležitější obsah, je ho na stránkách zpravidla čím dál tím více a nejlepším způsobem, jak přesměrovat návštěvníka na začátek stránky, jsou různá speciální tlačítka. se v tomto článku podíváme na to, jak vytvořit tlačítko nahoru pro váš web.

Když stránka webu obsahuje velké množství obsahu, uživatel po jejím přečtení a posunutí stránky do určitého bodu nebo úplně dolů se často začne posouvat nahoru, aby viděl navigační odkazy umístěné v horní části stránky. a/nebo provést nějaké akce.

Chcete-li zvýšit pohodlí uživatelů a obecně zlepšit použitelnost vašeho webu, je nejlepší použít tlačítko nahoru pro web, kliknutím na které je uživatel automaticky přesměrován do horní části stránky.

Existuje velmi jednoduchý způsob, jak takovou funkcionalitu uživateli poskytnout. Tato metoda nevyžaduje použití žádných knihoven nebo dalších skriptů a provádí se výhradně pomocí HTML a v případě potřeby pomocí CSS, vytvořením obyčejného interního odkazu.

Chcete-li to provést kdekoli ve spodní části stránky, jednoduše přidejte následující kód:

^Nahoře

Příklad CSS kódu:

Horní tlačítko ( šířka:100px; okraj:2px plné #ccc; pozadí:#f7f7f7; zarovnání textu:střed; odsazení:10px; pozice:pevné; dole:50px; vpravo:50px; kurzor:ukazatel; barva:#333; písmo -family:verdana; font-size:12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; )

nedostatky:

Tlačítka vytvořená pomocí JavaScriptu mohou být plovoucí a objeví se okamžitě, jakmile se uživatel posune na stránce trochu dolů, ale ve výše uvedeném příkladu se budou zobrazovat neustále.

Posouvání nebude plynulé a po kliknutí bude uživatel okamžitě přesměrován do horní části stránky.

Výhody tohoto typu tlačítka:

K ovládání tlačítka nepotřebujete používat skripty ani velké knihovny. A to je velmi velké plus.

Tlačítko je implementováno poměrně jednoduše. Pro jeho fungování budete potřebovat knihovnu jQuery, malý skript obsahující události jQuery, určité styly a značku DIV obsahující samotný text a požadované ID.

Tlačítko funguje v prohlížečích od verze Firefox 3.0.10 - 3.6.13, Internet Explorer 7 a 8, Google Chrome, Jquery 1.4.3. Bohužel tlačítko nefunguje v IE 6, ale potřebujete ho :)?

JQuery JavaScript kód:

Níže uvedený kód musíte vložit před značku na všech stránkách vašeho webu. Pokud je knihovna jQuery již připojena k vašemu webu, nemusíte přidávat první řádek.

$(function() ( $(window).scroll(function() ( if($(this).scrollTop() != 0) ( $("#toTop").fadeIn(); ) else ( $(" #toTop").fadeOut(); ) )); $("#toTop").click(function() ( $("body,html").animate((scrollTop:0),800; )); ));

Chcete-li dát tlačítku krásný vzhled, musíte přidat následující styly. Nejlepší je přidat je do šablony stylů vašeho webu.

#toTop ( width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* odsazení tlačítka od spodního okraje stránky*/ right:10px ; kurzor:ukazatel; display:none; color:#333; font-family:verdana; font-size:11px; )

Chcete-li tlačítko zavolat, přidejte před značku následující kód HTML.

^ Nahoru

Jednoduchý plugin, díky kterému se tlačítko zobrazí hladce a plynule se posune nahoru, když na něj kliknete. Chcete-li plugin používat na svém webu, nemusíte do označení HTML stránky přidávat žádné značky. Stačí připojit všechny potřebné soubory pluginu a bude to fungovat.

Prameny

Prezentovaný archiv obsahuje 3 složky: css - soubor stylu tlačítka, img - obrázek a složka js, která obsahuje 4 soubory JavaScript.

Připojování souborů JavaScript:

Rozbalte stažený archiv se zdroji do libovolné složky na vašem webu. K použití pluginu stačí připojit tři z dostupných souborů js. Chcete-li je zahrnout, přidejte před uzavírací značku následující cesty k souboru:

$(document).ready(function() ( /* var defaults = ( containerID: "toTop", // slábnoucí id prvku containerHoverID: "toTopHover", // mizející prvek hover id scrollSpeed: 1200, easingType: "linear" ) ; */ $().UItoTop(( easingType: "easeOutQuart" )); ));

Opravte cesty vedoucí k souborům v souladu s adresářem, ve kterém jsou umístěny soubory pluginu.

Upozorňujeme, že pokud jste již dříve připojili knihovnu jQuery ke svému webu, nemusíte přidávat následující kód:

Přidání CSS:

Dalším krokem je přidání CSS stylů, bez nich tlačítko nebude fungovat. Jsou dva způsoby, jak je propojit.

Prvním způsobem je přidat odkaz na soubor stylu CSS mezi značky na všech stránkách vašeho webu:

Jen nezapomeňte změnit cestu k souboru.

Druhým způsobem je zkopírovat celý obsah souboru ui.totop.css a vložit jej do souboru šablony stylů CSS vašeho webu. Druhá metoda bude racionálnější, protože nevyžaduje připojení nepotřebných souborů.

Toto řešení umožňuje pohyb po stránce dolů i nahoru, protože se skládá ze dvou tlačítek. Tlačítka jsou pevně umístěna na levé straně stránky. Při rolování tlačítka plynule blikají. Tento efekt můžete vidět v ukázce.

Prameny

Stažený archiv bude obsahovat všechny soubory potřebné pro fungování tlačítka. Jsou to soubory CSS, JS a soubory obrázků šipek.

Připojit HTML:

Nejprve musíte umístit HTML kód pro volání tlačítek na všechny stránky webu. Chcete-li to provést, umístěte text níže bezprostředně před značku.

JavaScript připojení:

Bezprostředně za kód HTML před značku umístěte kód pro volání potřebných souborů JavaScript a kódu JQuery.

$(function() ( var $elem = $("#content"); $("#nav_up").fadeIn("pomalé"); $("#nav_down").fadeIn("pomalé"); $( window).bind("scrollstart", function())( $("#nav_up,#nav_down").stop().animate(("opacity":"0.2")); )); $(window). bind ("scrollstop", function())( $("#nav_up,#nav_down").stop().animate(("opacity":"1")); )); $("#nav_down"). click( function (e) ( $("html, body").animate((scrollTop: $elem.height()), 800; )); $("#nav_up").click(function (e) ( $( "html, tělo").animate((scrollTop: "0px"), 800); )); ));

Cesty vedoucí k souborům JS musí být nahrazeny vlastními.

První řádek kódu obsahuje knihovnu JQuery, takže pokud jste ji již dříve připojili ke svému webu, musíte ji odstranit.

Dále přichází na řadu připojení dalšího JS souboru a kódu obsahujícího určité funkce, které je potřeba podrobněji zvážit. Protože s jejich pomocí můžete změnit některé parametry tlačítek. Níže je kód s vysvětlením:

// content je identifikátor divu, uvnitř kterého by měl ležet veškerý obsah, který by se měl posouvat, pokud veškerý obsah stránek vašeho webu leží pod jiným id, pak ho můžete zadat sem, protože bez toho tlačítka budou nefunguje $(function( ) ( var $elem = $("#content"); // pomocí následujících dvou řádků se tlačítka zobrazí $("#nav_up").fadeIn("slow"); $(" . průhlednost $(window).bind("scrollstart", function ()( $("#nav_up,#nav_down").stop().animate(("opacity":"0.2")); )); // zde můžete upravit stejnou průhlednost, ale v momentě, kdy se tlačítka jednoduše zobrazí na stránce, je výchozí hodnota 1 $(window).bind("scrollstop", function())( $("#nav_up,#nav_down ").stop().animate(("opacity":"1" )); )); // změnou čísla 800 můžete zvýšit nebo snížit rychlost posouvání stránky $("#nav_down").click( funkce (e) ( $("html, tělo").animate((scrollTop: $elem .height()), 800); )); // stejné jako výše, ale pro rolování dolů $("#nav_up").click(function (e) ( $("html, body").animate((scrollTop: "0px"), 800); ) ); ));

CSS připojení:

Chcete-li přidat CSS, jednoduše připojte soubor style.css umístěný ve zdrojovém archivu se stránkami webu:

A nejlepší možností by bylo zkopírovat styly tohoto souboru a vložit je do souboru stylů na vašem webu.

Další možnost pro organizaci hladkého posouvání obsahu stránky zdola nahoru pomocí JQuery. Tlačítko se nachází v pravém dolním rohu stránky a zobrazí se, pouze pokud stránku posunete trochu dolů. Vše je implementováno pomocí malého kousku kódu CSS a JS a také malého obrázku použitého jako tlačítko.

Toto tlačítko se mi líbí, protože jeho vytvoření nevyžaduje velké množství skriptů a má dobré efekty.

Nyní pojďme zjistit, co je třeba udělat pro připojení tlačítka k webu

Obraz:

Budete potřebovat obrázek samotného tlačítka, můžete si vzít jakýkoli, nebo můžete použít toto:

Chcete-li zavolat tlačítko za obsah hlavní stránky nebo před značku, umístěte následující kód HTML:

Horní

Scrollup( width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url("icon_top.png") no-repeat ;)

Pomocí tohoto kódu kromě vzhledu určíme polohu tlačítka a nastavíme výplň na 100 px zprava a 50 px zespodu. Nejlepší je přidat jej do šablony stylů vašeho webu.

Nejprve připojíme knihovnu, pokud již není připojena k vašemu webu. Pro tento účel mezi tagy...? vložte následující:

Poté, ihned po zahrnutí knihovny, musíte umístit následující kód JQuery:

$(document).ready(function())( $(window).scroll(function())( if ($(this).scrollTop() > 100) ( $(.scrollup").fadeIn(); ) else ( $(".scrollup").fadeOut(); ) ); $(".scrollup").click(function())( $("html, body").animate(( scrollTop: 0), 600); návrat false; )); ));

První ScrollTop - určuje aktuální vertikální polohu posuvníku a pokud bude větší než 100 px, automaticky se zobrazí tlačítko. Pokud chcete, aby se objevil dříve nebo později, změňte tuto hodnotu podle potřeby.

Jak vidíte, jsou zde ještě dva parametry – 0 – což znamená, že se stránka posune až na úplný začátek k nulovému pixelu, a 600 – to je rychlost animace v milisekundách.

Zdroj: http://gazpo.com/2012/02/scrolltop/

Když stránku posunete o určitý počet znaků dolů, zobrazí se vlevo dole velké tlačítko se šipkou. Při najetí kurzorem se tlačítko plynule rozsvítí a po kliknutí se plynule posune nahoru.

K vytvoření tlačítka se používá obrázek šipky, styly CSS a JQuery.

Obraz:

HTML kód:

K volání tlačítka použijte následující HTML kód:

Zpět na začátek

Musíte jej ale umístit přímo před hlavní obsah stránky, pokud jej umístíte před uzavírací značku, tlačítko nebude fungovat.

A ještě jeden důležitý bod ohledně HTML kódu. K tagu musíte přiřadit horní identifikátor.

Pokud již bylo značce přiřazeno konkrétní id, pak v kódu pro volání tlačítka umístěném nahoře musí být #top nahrazeno #vaše-id

Výplň a vzhled tlačítka byly nastaveny pomocí CSS, byla přidána vlastnost přechodu pro vytvoření efektu zpoždění při najetí kurzorem. Je lepší jej vložit do CSS souboru vašeho webu.

#back-top ( pozice: pevná; dole: 30px; levý okraj: -150px; ) #back-top a ( šířka: 108px; zobrazení: blok; zarovnání textu: na střed; písmo: 11px/100% Arial, Helvetica , bezpatkové; transformace textu: velká písmena; zdobení textu: žádné; barva: #bbb; /* přechod */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; ) #back-top a:hover ( color: #000; ) /* ikona šipky (značka span) */ #back-top span ( šířka: 108px; výška: 108px; display: block; margin-bottom: 7px; background: #ddd url( up-arrow.png) no-repeat center center; /* zaoblené rohy */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* přechod */ -webkit- přechod: 1s; -moz-přechod: 1s; přechod: 1s; ) #back-top a:hover span (barva pozadí: #777; )

$(document).ready(function())( // skryjte #zadni prvni $("#zadni").hide(); // zeslabeni #zadni nahor $(funkce () ( $( window ).scroll(function () ( if ($(this).scrollTop() > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top"). fadeOut (); ) )); // posuňte tělo na 0px při kliknutí $("#back-top a").click(function () ( $("body,html").animate(( scrollTop: 0), 800 ); návrat false; )); )); ));

První řádek připojuje knihovnu JQuery, pokud ji již připojenou máte, pak tento řádek nepřidávejte. Přidejte zbytek kódu mezi značky...

V případě potřeby můžete změnit následující parametry:

• 100 je počet pixelů, po kterých se tlačítko objeví po rolování;
• 0 - to znamená, že rolování bude provedeno na nulový pixel, tedy úplně nahoru.
• 800 je rychlost rolování v milisekundách.

Při rolování uprostřed stránky se zobrazí velké průsvitné tlačítko nahoru. Je těžké si jí nevšimnout. Vytvořeno pouze pomocí JQuery a CSS.

Pojďme pochopit HTML:

Aby tlačítko fungovalo, musí být obsah hlavní stránky, který je třeba posouvat, umístěn mezi dvě značky:

Není zde nic zvláštního, stačí vložit tento kód do souboru stylu CSS vašeho webu.

#message a ( /* zobrazení: blok před skrytím */ zobrazení: blok; zobrazení: žádné; /* odkaz je nad všemi ostatními prvky */ z-index: 999; /* odkaz za sebou neskrývá text */ neprůhlednost : .8; /* odkaz zůstává na stejném místě na stránce */ pozice: pevná; /* odkaz jde na konec stránky */ nahoře: 100 %; margin-top: -80px; /* = výška + preferovaná spodní část margin */ /* odkaz je vycentrován */ vlevo: 50 %; margin-left: -160px; /* = polovina šířky */ /* kolem rohů (dle vaší preference) */ -moz-border-radius: 24px ; -webkit-border-radius: 24px; /* aby byla velká a dobře viditelná (velikost, styl podle preferencí) */ šířka: 300px; výška řádku: 48px; výška: 48px; odsazení: 10px; barva pozadí: #000; velikost písma: 24px; zarovnání textu: na střed; barva: #fff;

$(function () ( /* místní nastavení proměnných pro zvýšení výkonu */ var scroll_timer; var display = false; var $message = $("#message a"); var $window = $(window); var top = $ (document.body).children(0).position().top; /* reagovat na událost rolování v okně */ $window.scroll(function () ( window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(funkce () ( if($window.scrollTop()