Změna velikosti písma

Drobečková navigace

CSS blog > Posuvník do stránek

Posuvník do stránek



Jednoduchý návod pro přidání posuvníku do stránek. Z hlediska použitelnosti ulehčíte návštěvníkovi pobyt na stránce tím, že po přečtení obsahu delší stránky nemusí pracně scrollovat na vrch stránky, ale jedním kliknutím se dostane navrch. Posuvník se objeví vždy pokud okno prohlížeče přesáhne scrollováním čtvrtku celkové výšky stránky.

HTML v layoutu

<script type="text/javascript">
$(document).ready(function(){
 $(window).scroll(function(){
    var h = $('#ipocontainer').height();
    var y = $(window).scrollTop();
    var mobile =  (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
     if(!mobile) {
          if( y > 340 ){
               $(".move-up").css({
                "opacity" : "1",
                "display" : "block"
            })
               $("move-up").css("display","block");
          } else {
               $(".move-up").css({
                "opacity" : "0",
                "display" : "none"
            })
          }
    }
 });
})
</script>

# Animovaný přechod kotvy
<script type="text/javascript">
            function scroll(id){
      $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>

Pravé HTML

<a onClick='scroll("ipoheader")' class="move-up" href="#ipoheader">↑</a>

CSS

 a.move-up {
    font-size: 3em;
    display: block;
    color: white;
    padding: 1em 0.5em;
    position: fixed;
    display: none;
    bottom: 233px;
    text-decoration: none;
    background-color: #A0C618;
}

Ukázka

Použití

Hodí se především pro weby s obsáhlými informacemi. Je potřeba pamatovat na to, že ukázka je tvořena na míru těchto stránek a proto se musí případně upravit fixní pozice a její odsazení nebo umístění odkaz v HTML v layoutu


Kalendář akcí

Po Út St Čt So Ne
25 26 27 28 29 30 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 1 2 3 4 5