Te mando un ejemplo y además te lo explico.
Primero insertamos el enlace del botón.
<a href="#" class="scrollup">Scroll</a>
◾Ahora le añadimos el estilo al botón.
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('icon_top.png') no-repeat;
}
Hemos definido la posición del botón como fija con 100px a la derecha y 50px del pie de la página. Hemos usado la propiedad “text-ident” para esconder el texto y mostrar el icono del botón. La propiedad “display:none;” hace que el botón sea invisible al principio.
El icono para el botón ‘icon_top.png‘ es el siguiente:
icon_top
◾Ahora queremos que el botón sea visible si navegamos hacia abajo. Esto lo podemos hacer con el evento scroll de jQuery.
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
La propiedad scrollTop obtiene la posición vertical actual de la barra de desplazamiento (barra de scroll). Si es superior a 100px, muestra el botón para ir arriba, si es inferior a 100px lo oculta.
◾El siguiente paso es hacer la animación para ir arriba de la página web al pulsar el botón.
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
La propiedad scrollTop:0 nos desplaza hacia el comienzo de la página web, en la posición 0px, y 600 representa la duración de la animación en milisegundos. Un valor más alto significa una animación más lenta. También puedes usar las propiedades predefinidas como ‘fast‘, ‘slow‘ o ‘normal‘ en vez de usar los milisegundos.
◾Este es el código jQuery completo:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>