Videonávod
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 na web ve Webnode přidat animaci padajícího sněhu? Padající sníh html kód
Chtěli byste vylepšit Váš web ve Webnode animací padajícího sněhu? Žádný problém! V tomto návodu si ukážeme, jak na Váš web přidáte padající online sníh. Jednoduše a zdarma. Čtěte dál! #Pojďme nato! 1. Přihlaste se do editace webu ve Webnode, a vložte níže uvedený...
Jak si na web ve Webnode přidat online rezervační systém? Zdarma!
Potřebujete na Vaše webové stránky např. ve Webnode vložit online rezervační systém pro správu rezervací? Ať už děláte cokoliv, Reservio je skvělou volbou pro organizaci Vašeho času! 🙂 A co všechno Vám online rezervační systém od Reservio nabízí? přehledný kalendář,...
Jak přidat vyhledávač produktů (searchbox) ve Webnode e-shopu?
Chtěli byste vyhledávač např. produktů na Vašem e-shopu od Webnode?Hledáte jednoduché a stylové vyhledávací políčko, které si vložíte na Váš web či e-shop ve Webnode?VIDEONÁVOD:V návodu Jak na web přidat vlastní vyhledávací pole? Google Custom Search jsme si ukázali...
VIDEONÁVOD: Jak ve Webnode vložit soubor ke stažení skrz tlačítko, text nebo obrázek
3 jednoduché možnosti jako ve Webnode vložit na web vlastní soubor (.pdf, .mp3, .mp4 apod). V tomto videonávodu si ukážeme jak si jednoduchým způsobem vložíte na webové stránky ve Webnode soubor. V editačním systému Webnode můžete nahrát různé typy souborů jako např....
Jak přesměrovat tlačítko “Pokračovat v nákupu” na konkrétní URL adresu ve Webnode e-shopu?
Chtěli byste si ve Vašem e-shopu ve Webnode nastavit konkrétní URL adresu na tlačítko "Pokračovat v nákupu" v košíku?V e-shopu Webnode je tlačítko "Pokračovat v nákupu" v košíku předdefinované, aby návštěvníka Vašeho e-shopu přesměrovat na posledně navštívenou stránku...
Jak vložit Facebook Pixel kód na web ve Webnode?
Chtěli byste si propojit Váš web ve Webnode s Facebook? V návodu Jak přidat remarketing kód ve Webnode? jsem Vám přiblížil co ten remarketing vlastně je. Pojďme se nyní společně podívat na FB reklamu a Vaše další možnosti :)Co je to ten Facebook Pixel? Facebook...
Jak přejmenovat “Košík” v menu ve Webnode e-shopu?
Chtěli byste přejmenovat košík v e-shopu ve Webnode z "Košík" na např. "Můj košík"? S mým jednoduchým návodem to určitě zvládnete. Stačí se přihlásit do mého newsletteru - William promotions news - a získat předpřipravený kód. V kódu jednoduše změníte text na...
Jak na web ve Webnode přidat animaci písajíci tužky?
Chcete zaujmout Vaše publikum? Chtěli byste si vylepšit Váš web? Vytvořil jsem pro Vás kód, který umožní na Vašem webu nebo e-shopu ve Webnode zobrazit animaci písajúcej tužky. V kódu si můžete zvolit vlastní text, aby tužka psala přesně to, co chcete! :)...
Jak přidat FAQ záložky na web ve Webnode?
Chtěli byste si na webové stránky ve Webnode přidat FAQ ?V návodu Jak zobrazit a skrýt text po kliknutí na tlačítko "Více textu"? jsem Vám ukázal jednoduchý způsob jak na webu skrýt text. V tomto návodu si ukážeme, jak je možné pomocí mého kódu vytvořit na webu...
Líbil se ti tento návod? Pošli ho přátelům 🙂
