Botão Subir e Descer

Views:
CÓDIGO CSS:

/* Botão Subir e Descer by Elaine Gaspareto */
#BounceToTop{
background:#ffffff;
text-align:center;
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
width:30px;
height:20px;
border-radius:2px;
padding:5px;
display:none}

#BounceToTop:before{
content:'';
position:absolute;
bottom:5px;
right:5px;
width:0;
height:0;
border-style:solid;
border-width:0 15px 20px;
border-color:transparent transparent #ca1700;
line-height:0}

#BounceToTop:hover:before{
content:'';
position:absolute;
bottom:5px;
right:5px;
width:0;
height:0;
border-style:solid;
border-width:0 15px 20px;
border-color:transparent transparent #464646;
line-height:0 }

#BounceToTop:after{
content:'';
position:absolute;
bottom:5px;
right:11px;
width:0;
height:0;
border-style:solid;
border-width:0 9px 12px;
border-color:transparent transparent #ffffff;
line-height:0}

#GoToDown{
background:#ffffff;
text-align:center;
position:fixed;
top:45px;
right:10px;
z-index:999;
cursor:pointer;
width:30px;
height:20px;
padding:5px;
border-radius:2px}

#GoToDown:before{
content:'';
position:absolute;
bottom:5px;
right:5px;width:0;
height:0;
border-style:solid;
border-width:20px 15px 0;
border-color:#ca1700 transparent transparent;
line-height:0}

#GoToDown:hover:before{
content:'';
position:absolute;
bottom:5px;
right:5px;
width:0;
height:0;
border-style:solid;
border-width:20px 15px 0;
border-color:#464646 transparent transparent;
line-height:0 }

#GoToDown:after{
content:'';
position:absolute;
top:5px;
right:11px;
width:0;
height:0;
border-style:solid;
border-width:12px 9px 0;
border-color:#fff transparent transparent;
line-height:0}



CÓDIGO HTML, ANTES DE </BODY>

<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$("#BounceToTop").fadeIn():$("#BounceToTop").fadeOut()}),$("#BounceToTop").click(function(){$("body,html").animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50)});var o=$("body");$("#GoToDown").click(function(){$("html, body").animate({scrollTop:o.height()},800),$("#GoToDown").fadeOut()}),$("#BounceToTop").click(function(){$("#GoToDown").fadeIn()})});
</script>
<div id='BounceToTop'></div>
<div id='GoToDown'></div>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage