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 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 si na web přidat speciální animaci pro porovnání 2 fotek (před a po)?
Chtěli jste si někdy vylepšit Váš web ve Webnode, aby Vám ho mohli všichni závidět?Na mých toulkách po Internetu jsem objevil český nástroj Fotopredapo.cz, který nám umožní jednoduše vytvořit animaci 2 fotek - před a po. Tento nástroj je vhodný např. pro úklidové...
Jak přejmenovat tlačítko “Do košíku” ve Webnode e-shopu?
Chtěli byste ve Webnode e-shopu přejmenovat tlačítko "Do košíku" ?V návodu "Jak přejmenovat" Košík "v menu ve Webnode e-shopu?" jsem Vám ukázal, jak se můžete odlišit od konkurence, a přejmenovat si nákupný košík. Pojďme se nyní společně podívat na Vaše další...
Jak změnit styl písma (font) ve Webnode?
VideonávodChtěli byste si změnit styl písma ve Webnode na svůj vlastní? Pár slov na úvodNástroj Webnode umožňuje změnit styl písma v sekci: "Nastavení" - "Vzhled" - "Fonty" a fonty, které editor nabízí jsou velmi pěkné. Ne každému avšak předdefinované fonty...
Jak na web ve Webnode přidat ikonky soc. sítí do DOLNÍ části webu?
Chtěli byste si přidat ikonky soc. sítí např. Facebook, Instagram do DOLNÍ části Vašeho Webnode webu?O propojení Vašeho Webnode webu se soc. sítěmi jsem už napsal pár návodů: Jak propojit Facebook s webem? Jak propojit www stránky se sociální sítí...
Jak na web ve Webnode přidat Vaše uživatelské recenze z Firmy.cz?
Recenze na web z katalogu firem Firmy.cz Hledáte widget uživatelské recenze na web?V návodu Jak přidat www stránku do katalogu firem Firmy.cz od Seznam? jsem Vás naučil jak si Vaši firmu zaregistrujete do nejznámějšího českého katalogu firem - Firmy.cz ...
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 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ř....
Líbil se ti tento návod? Pošli ho přátelům 🙂
