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

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

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

Vytvořit web zdarma

About
Latest Posts

Follow me

Viliam

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

Follow me

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 vložit Facebook Pixel kód na web ve Webnode?

Jak přejmenovat “Košík” v menu ve Webnode e-shopu?

Jak na web ve Webnode přidat animaci písajíci tužky?

Jak přidat FAQ záložky na web ve Webnode?

Jak vytvořit jednoduchý vizitkový web?

Jak si vytvořit vlastní patičku ve Webnode?

Jak skrýt kategorii “všechny produkty” ve výpisu produktů v e-shopu od Webnode?

Jak ve Webnode skrýt datum zveřejnění článku?

Jak na webové stránky vložit mapu z Mapy.cz?

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

Kupte mi kávu ☕