Aprende como hacer el botón de «Ir arriba» para tu sitio web. HTML, CSS y Javascript (Jquery).

Share on Pinterest
Comparte con tus amigos










Enviar

Estoy seguro que mas de una vez has entrado a un sitio, has scrolleado (bajar en la pagina) y has usado una de estas flechas que te envían a la parte superior del sitio, hoy en este tutorial te enseñare como crear uno de estos botones que te permitirán mejorar la experiencia de tu sitio web, sobretodo si tienes un blog o una pagina en la cual haya mucho contenido y el usuario tenga que bajar y subir en la pagina constantemente.

Para crear este botón como es lógico vamos a utilizar HTML para la estructura, CSS para darle forma al botón y por ultimo Javascript con su librería Jquery. Hacer este botón es realmente sencillo y no requiere de mucho código, en nuestro caso vamos a hacer un botón oculto que solo aparezca cuando el usuario haga uso del scroll del mouse, o de la barra de navegación de la ventana por lo cual el botón no se mostrara cuando carguemos la pagine y nos encontremos hasta lo alto de ella.

Una cosa que me gustaría comentarte es que es posible hacer un botón de ir a la parte de arriba sin Jquery, pero nosotros vamos a utilizar Jquery para darle una animación y que no se vea de golpe el cambio en la pagina.

Demo: http://falconmasters.com/demos/ir_arriba/

Recursos a utilizar:

Jquery: http://code.jquery.com/jquery-latest.js

Icomoon: http://icomoon.io/

Vamos a comenzar dándole estructura a nuestro botón, podemos hacerlo con prácticamente cualquier elemento, desde un <div>, un elemento <a>, etc. Yo en este caso lo haré mediante un <span>, seguramente tu quieras usar un elemento <a> ya que es lo mas lógico para que el usuario identifique que es un elemento clickeable, pero no te preocupes por eso, que ya con CSS le daremos un aspecto clickeable y con eso me refiero a cambiar el mouse, para que parezca que clickearemos un enlace.

Independientemente del elemento que hayamos decidido utilizar vamos a agregarle 2 clases, 1 de estas clases es la que vamos a trabajar con css, yo en este caso la he llamado .ir-arriba y la otra clase es la que usaremos para agregar el icono. Si tu aun no sabes como agregar iconos mediante fuentes y clases aquí tienes un tutorial en el cual enseño como utilizar iconos, como los que usaremos en este tutorial. Tutorial Iconos: https://www.falconmasters.com/tutoriales/como-utilizar-iconos-sitio-web-css/

Estructura HTML:

	<span class="ir-arriba icon-arrow-up2"></span>

<!--Agregamos contenido para que aparezca la barra vertical del navegador-->
	<section class="contenido">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</section>

En la estructura HTML anterior, te mostré el elemento <span> que es el botón que vamos a usar para poder clickear y subir en la pagina, pero como te darás cuenta también he agregado un section con una clase llamada contenido. Tu no agregues este código, simplemente lo agregue para tener algo de contenido en la pagina y que pudiera aparecer la barra de navegación vertical del navegador.

Ahora vamos a darle estilos CSS al botón, los estilos los tienes a continuación, pero en resumen lo que debemos hacer cambiar el cursor a puntero (simulando un enlace clickeable), darle un tamaño y posicionarlo en la parte inferior derecha de la ventana, esto lo logramos con la propiedad position y su valor fixed.

Código CSS:

.ir-arriba {
	display:none;
	padding:20px;
	background:#024959;
	font-size:20px;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
}

Y por ultimo tenemos el código JavaScript en donde básicamente le decimos que al clickear el botón nos enviara a la parte superior de la pagina, y también le decimos que si estamos en la parte superior no se muestre el botón, solo si bajamos en la pagina, de esta forma no estorbaremos al usuario con un elemento que es innecesario al momento de cargar la pagina. Usamos jquery porque es mas sencillo de realizar, ademas de que el botón no aparecerá y desaparecerá instantáneamente, sino que tendrá una animación como la que viste en el demo.

Nota: No te olvides de importar jquery a tu archivo .html o el código javascript no funcionara.

Código Javascript:

$(document).ready(function(){

	$('.ir-arriba').click(function(){
		$('body, html').animate({
			scrollTop: '0px'
		}, 300);
	});

	$(window).scroll(function(){
		if( $(this).scrollTop() > 0 ){
			$('.ir-arriba').slideDown(300);
		} else {
			$('.ir-arriba').slideUp(300);
		}
	});

});

A continuación tienes el videotutorial en donde explico mas a profundidad como funciona todo y hacemos este botón paso a paso.

Tutorial Como hacer botón de ir arriba con HTML, CSS y Javascript

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

36 respuestas a “Como hacer botón de ir arriba con HTML, CSS y Javascript”

  1. Gael dice:

    Eres Un Dios Ö xD

  2. Matias dice:

    Hola buenas tardes segui todos los pasos y me ha quedado en el margen superior izquierdo a que se debe este problea?

  3. JBlanco dice:

    TE AMOOOOOOOOOOOOO ERES GENIAL

  4. Derian dice:

    Buenas tardes Carlos Arturo
    te pedia un favor
    si me podria decir el nombre del plugin para la paginacion como la que tienes tu
    porfavor te lo agradeceria
    adios
    eres el mejor

  5. Manu del Aguila dice:

    Hola buenas hice todos tus pasos y lo único que no me funciona es que no sube a cliquear en el botón no sube para arriba.

  6. Isaac Garcia dice:

    Hola. A mi me funciona todo perfectamente, el problema es que no carga el icono, me descargué el mismo que usas en el ejemplo, pero no se por que motivo no lo muestra.

    Adjunto imagen de la carpeta donde esta todo montado (dentro de la carpeta fonts se encuentran 4 ficheros. Creo que puede ser algún problema de plugins o de la versión del navegador (Firefox 30.0)
    Adjunto tambíen imagen del codigo fonts por si ven algún error. Y tambíen la tercera, el codigo html (la parte de arriba), donde puede estar el fallo. (Quizas la forma de llamar lo ficheros o algo). También muestro a lado como queda el botón y el supuesto icono que no se carga bien.

    Gracias por tan buen tutorial.

  7. TorrTaaLow ­ dice:

    EXCELENTES TUTORIALES, EXPLICAS MUY BIEN PERO MUY BIEN, NOS HAS AYUDADO MUCHO, QUIERO QUE NOS ENSEÑES HACER EL BOTON QUE TIENES EN ESTE BLOG, EL BOTON DE CATEGORIAS DESPLEGABLE, SERIA DE GRAN AYUDA, GRACIAS….

  8. fabregasdesign dice:

    Buenas tardes Carlos Arturo,

    Me surge una duda, al aplicar el botón sobre varias páginas de la misma web, como hago para que la carga del script sea correcta.

  9. Dian dice:

    Hola una pregunta ¿Por qué se pone paréntesis en los funtions?

  10. Reymond Ponce dice:

    Hola Carlos Arturo Saludos desde Costa Rica !!

    Primero de todo Muchas Gracias por este tutorial bastante bueno al igual de los demás.

    Bueno ya implemente todo el código y lo mas bien me a funcionado. Pero ahora los estoy implementado en mi sitio web, el cual tiene varias section y div, al parecer no funciona no me aparece no me aparece el botón, Eh quitado la linea «display:none; » y es la única manera en la cual pude hacer apacer mi boton de ir arriba pero no me funciona y tengo todo correcto.La etiqueta span del icono con el botón lo puse justo debajo de mi etiqueta body y no funciono asi ni al final de cerrar la etiqueta body y no tuve ningún resultado que podría hacer!!

    Te dejare mi código no se si tenga algún error

    • Milton Mazariegos dice:

      Que tal Reymond.. estaba leyendo tu problema, se me ocurre verificar si agregaste a tu head el link de la fuente… por que la clase «icon-arrow-up2» se refiere a un caracter de una fuente de google, en mi caso lo utilice con fontawesome no con la de goole. Solo es una sugerencia. Te muestro la forma en que se hace con fontawesome:

    • Jegox Gonzalez dice:

      debes añadir un z-index:10000; a tu clase ir-arriba

  11. Enrique muñoz dice:

    hola falcon un saludo.. porque cuando lo miro desde un movil el cuadrito de la flecha se me va hacia atras del texto y es imposible darle click hay alguna solucion gracias

  12. Milton Mazariegos dice:

    Muy bien explicado Carlos Arturo.. solo le agregue el z-indez de 5000 y funciono perfectamente y eso que lo estoy implementando en una plantilla de Blogger, muchas gracias por el tip.

  13. Luciana dice:

    Hola, está muy bueno el tutorial, hice todo tal cual, pero como estoy haciendo una web a partir de initializr el html ya venia con links de javascript y de jquery, lo que no me funciona es el jquery, el boton me aparece pero no sube, ya probe borrando todos los javascript y jquery que venian con el archivo de initializr e igual no funciona, no se como solucionarlo

  14. Matias Capelli dice:

    Hola. Muchas gracias por los tutoriales, son muy buenos. Me podrías decir como hago para que no aparezca este botón cuando abro la página desde el celular? Muchas Gracias. Saludos

  15. Martin Hernández dice:

    Como hago para que el boton no este detrás de la ventana y no pueda clikearlo.. he probado con position:absolute pero me desaparece el botón.. :(

  16. Salus Corpas Molina dice:

    Y si por ejemplo tenemos un menu, con tres botones por ejemplo que nos llevan a distintos apartados dentro de un misni archivo y queremos que cada boton nos deslice a la sección que queramos como se podría hacer?, seria muy interesante aprender a hacerlo

    • Hugo Luna dice:

      Tendrías que trabajar con la etiqueta «section» o con «article» y colocar les un identificador.
      Y en el botón agregar la dirección por ejemplo:

      href=»#el identificador de tu sección»
      Seria un desplazamiento muy sencillo pero eso ya lo puedes arreglar con CSS y JS.

  17. Kent Carlos Pachas Moreyra dice:

    Hola Amigo el video esta excelenre. Dime si puedo agregarlo en mi web en joomla osea joomla 2.5 en el index.php se podra?

  18. Naty dice:

    Hola amiguito xq m sale asi m podrias ayudar xfa?¡

  19. Anthony Sira dice:

    Hola que tal. Todo bien pero lo que no me gusta es que el boton aparece desde que se abre la pagina. lo cual no deberia, deberia aparecer solo cuando se baja. Bajo y le doy clic y sube y ahi si desaparece. pero si actualizo vuelve a aparecer y estoy en el top de la pagina. ¿Tiene sentido? Si me pueden ayudar, gracias.

  20. Kevin dice:

    Hola, aplique este boton en una web donde utilizo bootstrap y al momento de cambiar al resolucion de la pantalla usando firefox pues el boton no aparece por ningun lado, alguna sugerencia?

  21. Rodolfo Magallanes dice:

    Hola que tal, si no me parece la flecha, y tengo bien el codigo de java script y sus enlaces…

  22. Luciana dice:

    hola que tal, el codigo me funcionaba perfecto pero un dia dejo de levantar el icono de internet y no me aparece.. sigue funcionando el boton pero sin el icono, cual sera el error

  23. Abner dice:

    Hola muy buenos tus videos.
    Necesito ayuda plis, es que no me reconoce la libreria de jQuery, me dice que la función $ en la primer linea de código del $(document).ready function…me marca error en inspeccionar elemento y no se por qué, ya enlacé los jQuery..plis es urgente
    Gracias y un saludo

  24. Christian Lòpez Camacho dice:

    Como podria hacer para que también aparezca en una ventana Modal?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso