Cuantas veces has visto la típica flecha que aparece a mitad de página y te permite volver al principio de la página en menos de un segundo. Esto es muy util si la página tiene mucho contenido y hay que hacer mucho scroll para llegar arriba. Lo podemos conseguir con un poco de css y jQuery. Puedes utilizar un botón, una imagen o un div que ponga algo como «Ir a arriba». Normalmente suele estar fija en la esquina inferior derecha.
Mi código css:
.flecha-scroll{
position: fixed;
right: 20px;
bottom: 20px;
opacity: .6;
display: none;
}
.flecha-scroll:hover{
cursor: pointer;
}
Ponemos display: none para que no aparezca de inicio. Y le damos un poco de transparencia con opacity. Después ponemos este código de jQuery. Podemos ponerlo en el head o al final de body, ya que no hace falta que cargue al inicio.
$(document).ready(function(){
$(".flecha-scroll").click(function(){
$("html,body").animate({ scrollTop : 0 }, 800);
});
});
$(window).scroll(function(){
if($(this).scrollTop > 300){
$(".flecha-scroll").show();
}
else{
$(".flecha-scroll").hide();
}
});
Con la primera parte del código la página volverá al principio cada vez que hagamos click en nuestro botón.
Con la segunda, conseguimos que aparezca y desaparezca dependiendo de la altura en la que este navegando el usuario en nuestra página. Si el usuario esta más de 300px de altura por debajo del top de la página aparece. Si esta por encima, desaparece. ¡Así de sencillo!
Este código no lleva más de 5 minutos. Y seguro que mejorará la experiencia del usuario en tu página. Si te ha gustado, díselo a tus amigos.
Comentarios recientes