Como crear un botón de ir arriba (Go Up) con HTML y JQuery

Cada vez es más común encontrarnos sitios web con contenido extenso que puede generar un scroll bastante largo y donde puede resultar tedioso para volver top del sitio.

En stivengordillo.com como en muchos sitios de la red, hemos implementado el botón de ir arriba o go up en la parte inferior derecha cuando se realiza cierto scroll, y realmente es bastante fácil hacerlo.

A continuación un ejemplo para que puedas implementarlo en tu sitio web o donde quieras

1. Creando la estructura en HTML

1
2
3
4
5
6
7
8
9
 
        <meta charset="UTF-8">
        <title>Botón para ir arriba</title>
 
 
 
 
<div class="goup">
</div>

2. Asignando los estilos básicos para posicionar el botón en la pantalla

1
2
3
4
5
6
7
8
9
10
11
12
body{
	position:relative;
}
.goup{
	background:#76aadb;
	bottom:0px;
	display: block;
	height: 50px;
	position: fixed;
	right:0px;
	width:50px;
}

3. creamos el script con la función para ir al top del sitio y evaluamos el scroll para que el botón aparezca o desaparezca

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
	$('.goup').hide();
	$('.goup').click(function(){
		$('body,html').animate({
			scrollTop:0
		},1000)
	});
	$(window).scroll(function () {
		if ($(this).scrollTop() &gt; 200) {
			$('.goup').fadeIn();
		}
		else {
			$('.goup').fadeOut();
		}
	});
});
  • Iniciamos la función mediante JQuery cuando el documento este listo
  • Mediante la función hide(), ocultamos el botón con el fin que no aparezca en el top del sitio cuando carga
  • Creamos la función que se va a ejecutar al hacer clic al botón y que va a desplazar las etiquetas body y html al tope del sitio web en 1 segundo
  • Creamos la función que va a detectar cuando se realice scroll en el sitio con una condición
    • Si el scroll supera los 200 píxeles en la pantalla el botón aparecerá mediante un fadeIn()
    • Si el scroll no supera los 200 píxeles en la pantalla el botón desaparece mediante un fadeOut()

¡ Si te sirvió este post, no olvides comentar y compartirlo 🙂 !

Like
Like Love Haha Wow Sad Angry
12211
       
Haz clic aquí si quieres publicar un comentario para este post
Suscribirse
Notify of
guest

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

4 Comentarios
Nuevos
Viejos Más votados
Inline Feedbacks
Ver todos los comentarios
Enrique
2 Años Hace

Me gustó el pots, pero tengo un problema. Tengo un script () para hacer que mi botón funcione, el problema radica en que tengo un jquery lightbox para hacer que una imagen pequeña se habrá en grande, (

var j = jQuery.noConflict();
jQuery(function() {
jQuery(‘#gallery a’).lightBox();
});
), pero el código del botón me interfiere con el código de las imágenes. Es decir, las imágenes no se abren como debería. Coloco el código del botón antes de lightbox, y las imágenes me funcionan, pero no el botón ir al top. ¿Cual sería la Solución?

Gracias;

Recio
Recio
4 Años Hace

Donde hay que incluir cada codigo? que ficheros hay que editar?