Subir Arriba, Go to Top o Scroll to Top son métodos que se usan para crear crear links hacia una ancla en especifico que este caso hacia el top de la página. ( id=top).
Hasta ahi todo es relativamente sencillo porque solo se necesita crear un link hacia una ancla más o menos así:
<body id="top"> <!-- TODO EL CONTENIDO --> <a href="#top">Ir arriba</a> </body>
Ahora lo que voy a tratar de explicarles es como agregar un efecto de jQuery, que hará la página se desplace lentamente hasta llegar al tope de la página en el navegador.
Primero modificaremos un poco el html para agregar un DIV que contendra el link hacia la ancla:
<div class="subir">
<a href="#top">Subir</a>
</div>
Para leer el tutorial Completo hagan clic en Seguir Leyendo…
Donde resalto que agregue un div con una clase (subir) que es donde añadire el efecto con jQuery, ahora queda agregar el javascript
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function($){
$(".subir").hide(); //Esto hace que el div Inicialice Oculto
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { //Esto hace que el Div aparezca de despues de haber bajado 100px con el scroll
$('.subir').fadeIn(); //Aparece con un efecto Fade
} else {
$('.subir').fadeOut(); // Desaparece con un efecto Fade
}
});
$('.subir a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500); // Todo esto hace que se la pagina se desplace hasta el tope con una lentitud de 500 milisegundos
return false;
});
});
});
</script>
Y ahora solo queda agregar el CSS que tiene tiene un papel importante porque definiremos el atributo “position:fixed” que servirá para que el podamos calcular el alto del navegador.
CSS:
.subir{
position:fixed; /*Importante*/
bottom:0; right:10px; /*Lo ubicamos abajo y a la derecha*/
line-height:30px;
height:30px;
width:65px;
text-align:center;
}
.subir a {
display:block;color: #000;
}
.subir a:hover {
color:#fff;
}
Y listo! con esto ya tenemos todo, use este mismo ejemplo en este blog así que si uds prestan atención en la parte inferior derecha notaran que aparece el div que contiene el link que sube hacia el tope de la página en el navegador.