Aprende como hacer el botón de «Ir arriba» para tu sitio web. HTML, CSS y Javascript (Jquery).
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
Eres Un Dios Ö xD
Hola buenas tardes segui todos los pasos y me ha quedado en el margen superior izquierdo a que se debe este problea?
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.
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;
revisa si tiene position fixed y esten bien los right y bottom
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»
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.
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.
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….
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.
Hola una pregunta ¿Por qué se pone paréntesis en los funtions?
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
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:
debes añadir un z-index:10000; a tu clase ir-arriba
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
tenes que agregarle a la clase .ir-arriba un z-index: 5000
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.
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
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
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.. :(
utiliza un z-index superior, por ejemplo 200
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
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.
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?
Hola amiguito xq m sale asi m podrias ayudar xfa?¡
tengo exactamente el mismo problema :(
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.
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?
Hola que tal, si no me parece la flecha, y tengo bien el codigo de java script y sus enlaces…
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
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
Como podria hacer para que también aparezca en una ventana Modal?