Jquery : Botón de “Ir Arriba”

Jquery Web

Si deseas agregar un botón de “Ir Arriba”, sólo tienes que agregar éste código en la cabecera de tu página web :

<script type=”text/javascript”>
$(document).ready(function(){
//nos desplazamos entre todos los divs
$(‘a.ancla’).click(function(e){
e.preventDefault();
enlace = $(this).attr(‘href’);
$(‘html, body’).animate({
scrollTop: $(enlace).offset().top
}, 1000);
});
//vamos al principio o al final de la pagina
$(‘a.arriba’).click(function(e){
e.preventDefault();
volver = $(this).attr(‘href’);
$(‘html, body’).animate({
scrollTop: $(volver).offset().top
}, 2000);
});
//pasando la cantidad de pixeles que queremos a scrollTop
$(‘.prueba’).click(function(){
$(‘html, body’).animate({scrollTop:100}, 2000); return false;
});
});$(document).ready(function(){

//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$(‘.scrollToTop’).fadeIn();
} else {
$(‘.scrollToTop’).fadeOut();
}
});

//Click event to scroll to top
$(‘.scrollToTop’).click(function(){
$(‘html, body’).animate({scrollTop : 0},1800);
return false;
});

});

</script>

Al final del Body tienes que agregar éste otro código :

<a href=”#” class=”scrollToTop” title=”Scroll up”></a>

Y en tu hoja de css agrega el siguiente código :

.scrollToTop{ width:64px; height:64px; padding:10px; text-align:center; background: whiteSmoke; font-weight: bold; color: #444; text-decoration: none; position:fixed; bottom:45px; right:15px; display:none; background: url(‘http://static.imegalodon.com.mx/img/icons/chevron-arrow-up.png’) no-repeat 0px 20px; } .scrollToTop:hover{ text-decoration:none; }

Adicionalmente el código sirve para moverse dentro de la página entre anclas, para hacer que ésto funcione, en el link a la liga, en el “Class” debes agregar “ancla” (p. ej. : <a href=”#nosotros” class=”boton ancla”>Nosotros</a>), y para el ancla debes agregar un “id” con el nombre del ancla (en éste caso sería algo así : <div id=”nosotros”>)

Si deseas ver en acción éste código, puedes ver la página de imegalodon.com ó la de imegalodon.mx.

Deja un comentario