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
10

        <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() > 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 🙂 !