Boton ir al top de la pagina con jquery

Buenas a todos, hoy vamos a aprender a hacer un botón para ir a la parte de arriba de la pagina, también llamado botón para ir al top de la pagina. Si miramos la imagen, podemos hacernos una idea de lo que estamos hablando.

Vamos a hacerlo de una manera mas profesional, haremos que por defecto el botón este oculto para que no moleste al visitante y al hacer scroll hacia abajo haremos que el boton desaparezca.

Empezamos echando un vistazo a las 2 funciones jquery:

//Se encarga de mostrar el botón cuando se hace scroll
$(window).scroll(function(){
   if ($(this).scrollTop() > 800) {
        $('.arrowtop').fadeIn();
   } else {
        $('.arrowtop').fadeOut();
   }
});

//Se encarga de subir al top al hacer clic en el botón
function arriba(){
	$("html, body").animate({ scrollTop: 0 }, 600);
    return false;
}

Ahora vemos un ejemplo completo, solo tienes que copiar y pegar:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Boton Subir arriba con jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//Se encarga de mostrar el botón cuando se hace scroll
$(window).scroll(function(){
   if ($(this).scrollTop() > 800) {
        $('.arrowtop').fadeIn();
   } else {
        $('.arrowtop').fadeOut();
   }
});
//Se encarga de subir al top al hacer clic en el botón
function arriba(){
	$("html, body").animate({ scrollTop: 0 }, 600);
    return false;
}
</script>

<style>
body {
	background:#CCC;
	font-family: 'Open Sans', sans-serif;
}
h1,h3 {
	text-align:center;
}
#contenido {
	width:1000px;
	min-height:3000px;
	border:1px solid #ddd;
	margin:10px auto;
	background:#fff;
}
.arrowtop{
	width: 60px;
	height: 60px;
	position: fixed;
	bottom: 50%;
	right: 135px;
	display: none;
	text-indent: -9999px;
	background: url(http://i.imgur.com/lIJ0rMJ.png) no-repeat;
	cursor: pointer;
}
</style>

</head>

<body>
<div id="contenido">

<h1>Boton Subir arriba con jquery</h1>

<h3>Hacer scroll para bajar y que aparezca el boton subir!</h3>

</div>

<a onClick="arriba();" class="arrowtop"></a>

</body>
</html>

Demo

Si te a gustado el post compártelo! Saludos..

11
Puntos

4926
Visitas

0
Resp

Por alber hace 109 meses

Administrador