Jak na web přidat tlačítko "Na začátek"?

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.

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

<title>jQuery Tlačítko na začiatok by William from Wpromotions.eu</title>

$(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>

/* 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>

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ář! 🙂

Ukázka tlačítka na začátek

Další návody

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

Jak na web ve Webnode vložit anketu?

Chcete na webové stránky ve Webnode vložit anketu?Online dotazník zdarma (anketa na web) je jeden z nejčastějších způsobů jak dostat od návštěvníků webu zpětnou vazbu. Bez zpětné vazby je obtížné posoudit, zda na své zákazníky působíte správné a zda má vůbec Vaše...

Jak přidat obrázek GIF ve Webnode?

Chcete na web ve Webnode vložit GIF obrázek? Systém Webnode nepovoluje gify, když je vložíte jako obrázek. Z tohoto důvodu musíte nejprve požadovaný .GIF obrázek nahrát na externí stránku a získat tak URL adresu obrázku. Získanou URL adresu vložíte do kódu a HTML kód...

Online rezervační systém na web? Recenze systému, který se přizpůsobí každému podnikání

Chcete na Váš web přidat spolehlivý a jednoduchý online rezervační systém? Reservanto je nejlepší rezervační systém, který nabízí verzi Zdarma bezplatně a to dožitovne. Jedním z cílů Vašeho webu může být například vytvoření rezervace. Nejčastěji tuto formu využívají...

Jak propojit Facebook Messenger s webem u Webnode?

Chcete propojit Facebook Messenger s webem u Webnodea získat tak "online chat" na webu zcela zdarma? Jednoduchý návod na propojení webu u Webnode s Facebook Messenger Facebook Messenger je skvělou volbou pro komunikaci s návštěvníkem Vašeho webu. Po kliknutí na...

Jak si vytvořit web stránku jednoduše a zdarma (Webnode návod)

Chtěli jste si někdy vytvořit vlastní webovou stránku úplně od začátku? Chcete si vytvořit web nebo e-shop a zviditelnit se na Internetu? Začněte právě teď a naučte se jak si jednoduše vytvoříte svůj první vlastní web. Vytvoření webu s Webnode je...

Jak Nastavit Emailový Marketing ve Webnode přes MailChimp?

Hledáte jednoduché řešení pro e-mailový marketing ve Webnode? Chcete na Váš web vložit vyskakovací okno (pop-up) pro sběr e-mailů? Posílejte svým odběratelům novinky skrz automatizovaný systém MailChimp. Je to zdarma do 2 000 odběratelů a 12 000 e-mailů...

Jak na web přidat remarketing kód ve Webnode?

Jak nastavit remarketing ve Webnode? a Kam vložit remarketing kód? V návode Jak přidat konverzní kód ve Webnode? jsem Vám ukázal jednoduchý postup pro vložení konverzního kódu pro sledování konverzí. Pojďme se nyní společně podívat na další PPC metodu tzv....

Líbil se ti tento návod? Pošli ho přátelům 🙂

Vytvořit web zdarma

About
Latest Posts

Viliam

Jednatel at Webgrow s.r.o.

Baví mě Internet a zvlášť redakční systémy jako Webnode nebo WordPress s Divi šablónou. Vytvořil jsem pro Vás portál Wpromotions.eu, abych Vám pomohl s tvorbou Vaší webové stránky nebo e-shopu. V případě potřeby mě neváhejte kontaktovat, rád Vám poradím.

Latest posts by Viliam (see all)

Jak skrýt nákupní košík v e-shopu Webnode? - 13.10.2019
Jak zvýšit prodej v e-shopu o 7-18%? - 9.10.2019
Jak na web ve Webnode vložit anketu? - 16.8.2019

Jak na web přidat tlačítko “Na začátek”?

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) ?

Další návody

Jak skrýt nákupní košík v e-shopu Webnode?

Jak zvýšit prodej v e-shopu o 7-18%?

Jak na web ve Webnode vložit anketu?

Jak přidat obrázek GIF ve Webnode?

Online rezervační systém na web? Recenze systému, který se přizpůsobí každému podnikání

Jak propojit Facebook Messenger s webem u Webnode?

Jak si vytvořit web stránku jednoduše a zdarma (Webnode návod)

Jak Nastavit Emailový Marketing ve Webnode přes MailChimp?

Jak na web přidat remarketing kód ve Webnode?

Viliam

Latest posts by Viliam (see all)

Přihlaste se k odběru novinek ze světa webových stránek - William Promotions

Ďakujem ti za prihlásenie. Ozvem sa čoskoro s novým návodom :)

Zanechat komentář Zrušit odpověď na komentář

Doporučeno: Vytvořte si web zdarma

Rubriky

Nejnovější články

Vytvořte si web nebo e-shop

Návštěvnost webu

Kupte mi kávu ☕

Přihlaste se k odběru novinek ze světa webových stránek - William Promotions

Ďakujem ti za prihlásenie. Ozvem sa čoskoro s novým návodom :)