Este post foi criado com base neste link.
A diferença desse post em relação ao outro, é que o efeito é aplicado no topo do site.
Não esqueça de fazer a chamada da biblioteca do JQuery.
<style type="text/css"> *{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; color:#000; } #containerTopo{ position:fixed; top:0; width:100%; color:#FFFFFF; border-bottom:4px solid #0099FF; } #topo{ display:none; width:100%; height:200px; margin:0 auto; text-align:center; background-color:#0066CC; color:#FFFFFF; } #icone{ position:absolute; bottom: -28px; right:5px; float:right; z-index:9999; height:24px; width:24px; cursor:pointer; } .plus{ background:url(plus.png) no-repeat; } .minus{ background:url(minus.gif) no-repeat; } #topo { background-color: #1E1B1A; padding: 25px 10px; height:60px; } .float{ float:left } .clear{ clear:both } #menu{ height: 80px; background-color:#003399; } </style> |
<script type="text/javascript"> $(function() { $("#icone").click(function(){ var topo = $("#topo"); if (topo.is(":visible")){ topo.slideUp( 500 ); $("#icone").removeClass('minus').addClass('plus'); } else { topo.slideDown( 500 ); $("#icone").removeClass('plus').addClass('minus'); } }); }); </script> |
<div id="containerTopo"> <div id="icone" class="plus"></div> <div id="topo">TOPO DO SITE</div> </div> |
Veja o funcionamento clicando aqui.