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: http://www.falconmasters.com/tutoriales/como-utilizar-iconos-sitio-web-css/

Estructura HTML:

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:

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:

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

  • Gael

    Eres Un Dios Ö xD

  • Matias

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

    • HourGlass Dm

      se me ocurre que pruebes hasinedolo con una posición relativa y orientándolo con los valores
      left:100px; y bottom;40px: o intenta usando float:right; pero creo q se te puede mover todo.

    • HourGlass Dm

      o estas poniendo el span en un lugar equivocado :v

    • Con cuerdo con HourGlass, es muy probable que sea un simple error, sobre todo al escribir el position:fixed;

    • Alain Barrios

      revisa si tiene position fixed y esten bien los right y bottom

  • JBlanco

    TE AMOOOOOOOOOOOOO ERES GENIAL

  • 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

    • Claro que si, el plugin se llama WP-PageNavi

      • gracias
        mira me puedes decir como codigo externo osea del sublime a wordpress para subir la barra social
        te lo agradeceria muchisimo tengo muchas cosas que deseo subir a wordpress pero no e podido hacerlo
        “GRACIAS ERES EL MEJOR”

  • Manu del Aguila

    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.

  • Isaac Garcia

    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.

  • TorrTaaLow ­

    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….

  • fabregasdesign

    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.

  • Dian

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

  • Reymond Ponce

    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

      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

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

  • Enrique muñoz

    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

    • Milton Mazariegos

      tenes que agregarle a la clase .ir-arriba un z-index: 5000

  • Milton Mazariegos

    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.

  • Luciana

    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

  • Matias Capelli

    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

  • Martin Hernández

    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.. :(

    • Jorge Cavero Zarza

      utiliza un z-index superior, por ejemplo 200

  • Salus Corpas Molina

    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

      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.

  • Kent Carlos Pachas Moreyra

    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?

  • Naty

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

    • Stain

      tengo exactamente el mismo problema :(

  • Anthony Sira

    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.

  • Kevin

    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?

  • Rodolfo Magallanes

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

  • Luciana

    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

  • Abner

    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


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso