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ářů(0)