Tecnología y Coaching para Emprendedores

Crea un Botón de SUBIR para Diseño Web Responsive

responsive design

En diseño web responsive es necesario un botón que nos permita volver al principio de la página con un sólo clic. Para hacerlo, necesitamos HTML, CSS y jQuery y en sí no hace falta ni entender el código para que funcione. Es tan fácil como un copiar y pegar en los lugares adecuados. En este post aprenderás a hacer un botón de subir igual que el de CreativaSfera.


Paso 1

Antes del cierre de la etiqueta footer has de insertar este código HTML:

<a class="go-top" href="#">Subir</a>

Paso 2

Justo antes de cerrar la etiqueta body al final del documento HTML, has de insertar este código de jQuery:

<!-- JavaScript -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			// Show or hide the sticky footer button
			$(window).scroll(function() {
				if ($(this).scrollTop() > 200) {
					$('.go-top').fadeIn(200);
				} else {
					$('.go-top').fadeOut(200);
				}
			});

			// Animate the scroll to top
			$('.go-top').click(function(event) {
				event.preventDefault();

				$('html, body').animate({scrollTop: 0}, 300);
			})
		});
	</script>

Paso 3

Con el código anterior, ya tenemos el enlace funcionando. Ahora le vamos a dar formato con el CSS. Para eso es necesario ir a la hoja de estilos CSS, normalmente llamada style.css, y añadir este código:

.go-top {
	position: fixed;
	bottom: 2em;
	right: 2em;
	text-decoration: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 12px;
	padding: 1em;
	display: none;
}

.go-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

Con esto ya tienes un botón exactamente igual que el que aparece en CreativaSfera.


Ocultarlo para desktop

Si no quieres que el botón aparezca siempre y lo quieres reservar para dispositivos móviles, el código CSS anterior se debería reservar para un media query de CSS3 y se debería entonces ocultar del resto de resoluciones con la regla de CSS display:none.


Para acabar

En este mini-tutorial hemos aprendido a implementar un botón de subir para diseño web responsive. Si tienes dudas sobre cómo implementar los media queries de CSS3, te recomiendo mi curso de diseño web responsive. Si te ha gustado el artículo, compártelo y deja un comentario.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.


Comentarios

  • Alfonso

    Gracias Sandra por el post, es simple y efectivo. Muchas gracias.

    • Sandra

      A ti por comentar, Alfonso! Un abrazo :-)

  • Matías

    Muchas gracias Sandra me ha venido de maravilla para un trabajo que estaba realizando con responsive design.

    Como siempre todo muy bien explicado y de gran utilidad.

    Un saludo.

    • Sandra

      Me alegro Matías!

  • Edson

    Gracias, lo implemente en una practica que estoy realizando y da de maravilla, gracias por compartirlo se valora muchisimo. Un abrazo.

  • Ronald

    Gracias por este post y los demas post, me recomendaron el post para crear un theme WP desde cero y está excelente. Saludos desde Perú

    • Sandra

      Gracias a ti por comentar, Ronald. Un saludo!

  • Jacob

    MUCHÍSIMAS GRACIAS Sandra por compartir tus conocimientos con nosotros. La verdad que es muy interesante y de agradecer que haya gente como tú sobre todo para personas como yo que queremos ir aprendiendo (aunque sea poco a poco) y por desgracia no nos podemos permitir el realizar ningún curso de pago… así que gracias a muchas “mini-informaciones” o tutoriales/videotutoriales que vamos viendo/encontrando por internet conseguimos ir avanzando poquito a poco.

    Lo tendré en cuenta para mi primer proyecto de web responsive en el que estoy inmerso ahora y que espero me salga bien (gracias a tu ayuda entre otras por la información compartida, y que ha hecho que lo intente a pesar de no haber podido dar ningún curso, “sólo” con la información que he ido recopilando).

    Te habla un seguidor de LinkedIn y ahora también de G+

    Saludos.

    • eSandra

      Hola Jacob, me alegro mucho que los contenidos de eSandra te sean tan útiles, es la intención, aportar valor añadido a la comunidad. Me alegro te sea de ayuda :-)

      un saludo!
      Sandra

  • Walter

    Hola Sandra, muy útiles tus aportes, tus concejos y opiniones.

    Saludos.

    • eSandra

      Gracias, Walter!

      un abrazo,
      Sandra

  • IVAN_GR9

    Hola Sandra. Buen tutorial. Solo una duda, en lugat de hacer un barrido hacia arriba, sube de golpe, y en Explorer ni me funciona. Gracias.

    • eSandra

      Hola Ivan,

      algo debes hacer mal, es exactamente el mismo botón que utilizo en eSandra y funciona todo bien..

      un abrazo!
      Sandra

  • IVAN_GR9

    Hola de nuevo Sandra. He probado y si pongo el jQuery antes de la etiqueta de cierre de head en lugar de en la de cierre de body, ya funciona también en IExplorer, pero sigue sin hacer el barrido, sube hacia arriba de golpe. ¿Alguna idea de porque me hace esto? Pego exactamente el mismo código que usas tú. Gracias.

    • eSandra

      no te sabría decir sin verlo, imagino que algún problema en el JavaScript..

  • Paco

    Hola Sandra, porqué no me funciona en dispositivos moviles?

    • eSandra

      Hola Pablo,

      no lo sé, a mí me funciona correctamente, mira de revisar el código..

      un abrazo,
      Sandra

  • ForoPesca

    Bien explicado, sencillo de aplicar. Gracias

  • Richie

    Gracias Sandra, me funcionó perfecto…Felicitaciones

    • Sandra

      Me alegro, Richie