Animovaný přechod na začátek stránky - jQuery.

 2012-01-27 00:00:00
 Dmitry Burobin

V tomto článku napišeme jednoduchý skript o tom, jak se da realizovat tlačítko přechodu na začátek(nahoru) stránky. Toto je velice snadný pomocí jQuery. Potřebujeme porovnát hodnotu scrollTop s konkrétní hodnotou a jestli první je větší, tak zobrazime tlačítko přechodu na začátek. Jakmilé uživatel zmačkné tlačítko, hned se posuné na začátek.

Ukázka!

Vzhled a CSS.

Zadejte prvku #back-top vlastnost position:fixed, aby jeho pozice byla zafixováná na stránce. Tég span není nutný. Přidal jsem ho jen pro zobrazení obrázku s šipkou. A též jsem přidal transition:1s pro efekt při namíření kurzoru.

jQuery

#back-top {
    
positionfixed;
    
bottom30px;
    
margin-left: -150px;
}

#back-top a {
    
width108px;
    
displayblock;
    
text-aligncenter;
    
font11px/100ArialHelveticasans-serif;
    
text-transformuppercase;
    
text-decorationnone;
    
color#bbb;

    /* spomalování */
    
-webkit-transition1s;
    -
moz-transition1s;
    
transition1s;
}
#back-top a:hover {
    
color#000;
}

/* obrázek s šikou (tég span) */
#back-top span {
    
width108px;
    
height108px;
    
displayblock;
    
margin-bottom7px;
    
background#ddd url(up-arrow.png) no-repeat center center;

    /* zaokrouhlení úhlů */
    
-webkit-border-radius15px;
    -
moz-border-radius15px;
    
border-radius15px;

    
/* spomalování */
    
-webkit-transition1s;
    -
moz-transition1s;
    
transition1s;
}
#back-top a:hover span {
    
background-color#777;
}

jQuery kód.

Níže je iveden kód jQuery (můžete ho vložit kam chcete). Schovává prvek s id back-top. Pak ověřuje hodnotu pozice horního scrollu (scrollTop), jestli je větší než 100, zobrazuje prvek s id back-top, jinak jej schová. Poslední část kódu je funkce, která zpracovává událost kliknutí na tlačítko. Když zmačkneme tlačítko, tak hodnota scrollTop tégu body bude rovna 0.
Jestli byste chtěli seznámit se základy práce s jQuery, přečtete si minulý článek.

<script type="text/javascript">
$(
document).ready(function(){

    
// schovej #back-top
    
$("#back-top").hide();
    
    
// objev se #back-top
    
$(function () {
        $(
window).scroll(function () {
            if ($(
this).scrollTop() > 100) {
                $(
'#back-top').fadeIn();
            } else {
                $(
'#back-top').fadeOut();
            }
        });

        
// scroll body to 0px když kliknete
        
$('#back-top a').click(function () {
            $(
'body,html').animate({
                
scrollTop0
            
}, 800);
            return 
false;
        });
    });

});
</script>

A to je vše, jednoduché ne? Tady mate archiv s tímto příkladem.

Zdroj: webdesignerwall.com/tutorials/animated-scroll-to-top

Systém Orphus
Napište komentář.
Celkem komenrářů(15)
Jeffpoonia - 2017-11-13  06:37:29
 With Out Prsciption Allopurinol 300 Mg Canadianpharmacies [url=http://cheapestcial.com ]cialis price[/url] Amoxicillin Overdose Infant
LarExaf - 2017-11-05  07:03:04
 Propecia From Canada [url=http://cheapestcial.com]online pharmacy[/url] Pharmacie En Ligne Misoprostol
LarExaf - 2017-10-30  13:43:51
 Zithromax Allergic Reactions [url=http://realviaonline.com]viagra[/url] Service Maxium Pediatric Amoxil Dose
LarExaf - 2017-10-30  13:43:51
 Zithromax Allergic Reactions [url=http://realviaonline.com]viagra[/url] Service Maxium Pediatric Amoxil Dose
LarExaf - 2017-10-30  13:43:50
 Zithromax Allergic Reactions [url=http://realviaonline.com]viagra[/url] Service Maxium Pediatric Amoxil Dose
LarExaf - 2017-10-11  10:46:01
 Cialis Kaufen Spanien [url=http://viaonlineusa.com]viagra[/url] Legally Isotretinoin Amex Accepted
LarExaf - 2017-10-11  10:46:00
 Cialis Kaufen Spanien [url=http://viaonlineusa.com]viagra[/url] Legally Isotretinoin Amex Accepted
LarExaf - 2017-10-11  10:45:59
 Cialis Kaufen Spanien [url=http://viaonlineusa.com]viagra[/url] Legally Isotretinoin Amex Accepted
LarExaf - 2017-10-11  10:45:58
 Cialis Kaufen Spanien [url=http://viaonlineusa.com]viagra[/url] Legally Isotretinoin Amex Accepted
LarExaf - 2017-10-09  10:52:44
 Viagra En Farmacias Similares Kamagra Wikipedia Will Amoxicillin Treat Bv [url=http://cheaplevi.com]buy levitra[/url] Pet Amoxicillin Without A Script
LarExaf - 2017-10-08  12:41:14
 Viagra Softabs Cialis Professional Wikipedia [url=http://buygenericvia.com]viagra[/url] Prix Cialis En Pharmacie France
LarExaf - 2017-10-08  12:41:13
 Viagra Softabs Cialis Professional Wikipedia [url=http://buygenericvia.com]viagra[/url] Prix Cialis En Pharmacie France
LarExaf - 2017-10-08  12:41:12
 Viagra Softabs Cialis Professional Wikipedia [url=http://buygenericvia.com]viagra[/url] Prix Cialis En Pharmacie France
LarExaf - 2017-10-08  12:41:11
 Viagra Softabs Cialis Professional Wikipedia [url=http://buygenericvia.com]viagra[/url] Prix Cialis En Pharmacie France
Martin Čejka - 2015-02-05  21:09:09
 ahoj, je to fajn návod...ale objevuje se mi tam šipka 2x nad sebou...kde je chyba? díky Martin
[1] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.