Hledáte způsob jak na webové stránky u Webnode vložíte na všechny stránky webu tzv. tlačítko “Na začátek” (Back to top button) ?
V návode “Jak vytvořit kotvu” jsme si ukázali jak návštěvníka webu přesměrovat (zoskrolovať) na určité místo na webu. Kotva se dá použít i jako “tlačítko na začátek“, avšak v tomto návodu si ukážeme elegantnější řešení tzv. back to top sticky button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<meta charset="utf-8"> <title>jQuery Tlačítko na začiatok by William from Wpromotions.eu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ if($(this).scrollTop() > 100){ $('#scroll').fadeIn(); }else{ $('#scroll').fadeOut(); } }); $('#scroll').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> <style type="text/css"> /* BackToTop button css */ #scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } #scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff } #scroll:hover { background-color:#e74c3c; opacity:1; filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; } </style> <a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a> |
1. Výše uvedený HTML kód vložte na Vaše webové stránky u Webnode pomocí tlačítka + a HTML. Kód vložte na každou stránku webu na níž chcete tlačítko na začátek zobrazit (v dolní části webu).
TIP: V uvedeném HTML kódu lze upravit barvu tlačítka. Na řádku číslo 28 můžete upravit modrou barvu, na řádku číslo 47 červenou barvu tlačítka “na začátek“. (Po přejetí myší tzv. On hover).
A máte hotovo! …
Pokud se Vám toto tlačítko líbí, napište nám komentář! 🙂
Další návody
Jak vytvořit jednoduchý vizitkový web?
Jak vytvořit jednoduchý vizitkový web? (scroll-ovací web)Co je to vizitkový web? Vizitkový web je jednoduchý web, který stručně a jasně představuje Vaše služby, či produkty. Je to jednoduchá webová stránka, která slouží pro získání základních informací o Vaší firmě....
Jak si vytvořit vlastní patičku ve Webnode?
Chtěli byste na web / e-shop přidat vlastní patičku (footer) ve Webnode?Chtěli byste si na webové stránky, či e-shop ve Webnode přidat přesměrování resp. odkaz na Vaše obchodní podmínky & GDPR do patičky? S mým jednoduchým návodem to určitě zvládnete. Stačí se...
Jak skrýt kategorii “všechny produkty” ve výpisu produktů v e-shopu od Webnode?
Jak na webu ve Webnode skrýt kategorii "Všechny produkty" ve výpisu produtků? V návodu Jak ve Webnode skrýt košík v eshopu? a Jak ve Webnode skrýt datum zveřejnění článku? jsme si ukázali jak jednoduše je možné ve Webnode něco "skrýt". V tomto článku se dozvíte, jak...
Jak ve Webnode skrýt datum zveřejnění článku?
Jak na webe ve Webnode skryť datum zveřejnění článku??V návodu Jak ve Webnode skrýt košík v eshopu? jsme si ukázali jak jednoduše je možné ve Webnode něco "skrýt". V tomto návodu se dozvíte, jak jednoduše můžete ve Webnode, odstranit datum z článku ve Vašem blogu....
Jak na webové stránky vložit mapu z Mapy.cz?
Jak na Vaše webové stránky vložit mapu od Mapy.cz?V návodech Jak správně nastavit Google Mapu ve Webnode? a Jak si vytvořit mapu s vlastními body (špendlíky na mapě)? jsme si ukázali jednoduché řešení pro přidání mapy na web přes služby od Google. V tomto návodu se...
Jak na web pridať padajíci konfety?
Jak na webové stránky vo Webnode pridať animáciu - padajíci konfety?Do mé Webnode poradny přišla otázka, zda je možné na webu ve Webnode přidat animaci padajících konfet. Ano je to možné - pro všechny, kteří hledají "padající konfety na web" jsem připravil kód, který...
Jak propojit Google Tag Manager s webem od Webnode?
Co je to Google Tag Manager?Internetový (online) marketing vyžaduje vkládání různých měřících kódů na Váš web či e-shop. Abyste nemuseli vkládat každý měřící kód "ručně" do hlavičky, či patičky webu můžete použít službu Google Tag Manager, která Vám umožní vložit na...
Jak skrýt nákupní košík v e-shopu Webnode?
Jak skrýt nákupní košík v e-shopu Webnode?Máte u společnosti Webnode vytvořený e-shop a chtěli byste skrýt nákupní košík v menu a tlačítko "Přidat do košíku", abyste mohli využívat e-shopové prvky jako např. přidávání produktů, avšak nechcete využívat e-shop jako...
Jak zvýšit prodej v e-shopu o 7-18%?
Chcete zvýšit prodej na Vašem e-shopu? Máte návštěvníků, avšak jen málo lidí si něco koupí? V tomto návodu Vám ukážu skvělý způsob jak zvýšit prodeje v e-shopu. Jsou to notifikace. Ano - obyčejné, pro někoho možná otravné, notifikace. Online nástroj Notifikuj.cz se mi...
Líbil se ti tento návod? Pošli ho přátelům 🙂
