Como crear un boton de ir arriba con HTML, CSS y JavaScript

[@rafaelromero710]

funciona a la perfeccion!!! Mil gracias!!! para los que no les sale es seguramente porque les falta el icono que tiene clase= "fas fa-chevron-up" de font awesome.... yo directamente busque una imagen que me gustaba, la descargue y la agregue al proyecto, luego en vez de usar el elemento "i" lo reemplace con un div el cual le puse una clase y luego desde css simplemente a esa clase del icono, le agregue el tamanio que queria y de background la imagen que habia descargado junto a las demas propiedades que le pone a ese elemento de tipo icono y listo....

[@ricardocordova9540]

Simple, sencillo, elegante y muy bien explicado. Te felicito.

[@matifrontend]

Muchísimas gracias !! Me encanto la explicación y la sencillez.

[@abrahamsanabria9491]

bro! brutal, me funciono a la perfección, ojala hubiera llegado a este video antes de ver los otros 40, no te doy un beso porque aja!

[@yuriiseoalva2509]

bro mil gracias, faltan vídeos así sencillos donde no dependan de usar librerías y librerías, al final nos olvidamos de programar, ya me habia olvidado de como usar los id para navegar deontro del mismo html mil gracias de verdad

[@LaEsenciadeRespirar...]

Funciona perfectamente, solo lo hice de forma un poco diferente. ----------------------- HTML: ----------------------- CSS: #bt-top { background-color: var(--corRoxo); display: none; } ----------------------- JavaScripts: var btTop = document.getElementById("bt-top"); window.onscroll = function () { if (document.documentElement.scrollTop > 150) { document.querySelector(".bt-top") btTop.style.display = "block"; } else { document.querySelector(".bt-top") btTop.style.display = "none"; } } btTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); ----------------------- ps: hay algunos que tienen algunos dudas con el "fa" del icono, pues, es necesario poner esto al final del body: Así ya funcionará el icono de la flecha y lo pueden escoger yendo a la página 'fontawesome.com'.

[@MiguelAngel-arte-y-tecnologia]

no me sale nada, pero con la herramienta desarrollador vi que si estan los divs y hace el proceso, pero el boton no aparece para nada y me di cuenta que la clase del icono no esta??

[@gilbertoespinosasuero988]

El código no funciona si no da la librería y el icono tiene que poner esa información también.

[@jorgecoimbra347]

a mi tampoco

[@AlejoAiz]

muchas gracias bro!

[@luisgabrielgonzalezlopez4631]

Muy buen vídeo me ayudo mucho gracias

[@israelalcudia9211]

Hola el js de clic y scrool se puede aplicar a un boton ya existente en mi web? Gracias 🫂

[@edgarcruz106]

Como puedo hacer que inmediatamente detectar el escroll hacia arriba aparesca? Ya que ahi lo hara solo hasta que vuelva a ser menor que 100

[@nataliaandrearamirezlondon5616]

en 12:12 como creaste esa función de flechas? es que no encuentro ese simbolo raro que va despues del igual

[@bryandelomejor]

Normalmente los diplés están junto a la "z" o junto a el número uno. Creo que el código ASCII es: Alt+174 para apertura y Alt+175 para cerrar. De igual manera, si no podés poner las funciones flecha () => {}, podés sustituírlo fácilmente por una función anónima de toda la vida function(){}. Espero haberte ayudado.

[@pedroolivas_]

Lo que dijo Bryan es correcto.

[@lauraroberto2934]

Me gusto tu video... Muchas gracias

[@danielflorez1744]

Muy buen video bro!

[@javiergarciatornel3616]

Lo he hecho todo paso a paso, me sale el contenedor azul y funciona todo correcto pero no se ve la flecha blanca de ir hacia arriba, como lo arreglo?

[@mateohidalgogranobles7792]

Tambien tengo esa duda 🤧

[@Chitorra98duriduridr]

Creo que es porque tiene (y no muestra) font awesome (creo) y es una clase de font awesome para que muestre con el flechita.

[@Chitorra98duriduridr]

@@mateohidalgogranobles7792 Creo que es porque tiene (y no muestra) font awesome (creo) y es una clase de font awesome para que muestre con el flechita.

[@irinandeurcullo]

Lo pude hacer, pero solo me quedo el circulito, como puedo poner la flechita blanca que indique que va hacia arriba? el click funciona, solo le falta la flechita de arriba

[@juanmontoyaleon5224]

Podrias compartir por favor ese codigo de la libreria de font awesome? 0:36

[@gilbertoespinosasuero988]

Hasta yo necesito ese código ya lo tiene ?

[@bymarkokiller9640]

Hola, saludos!!! a mí no me queda la parte de centrar el ícono, y lo hice como 1,000 mil veces y sí sube, funciona bien, pero el icono no lo centra, no le cambia el color, no lo afecta en nada. Le puse todos tus estilos a todos los ejemplos que hice para saber si no era mi código, pero no tuve suerte. ¿crees que puedas compartir tu proyecto completo?.

[@pedroolivas_]

Si no le afecta nada tal vez la clase no esté igual que en el HTML. Igual en unos días subo el proyecto a mi página web, ahí puedes checar el código completo.

[@ariiannitaleenda9964]

Cómo hago para q funcione con flechas, para. En el la tv funcione con el control remoto de fechas ? Porfis

[@diegovera3230]

intente agregarlo a una pagina que tenia, pero no salio e hize tal cual como en el tutorial, porque?

[@pedroolivas_]

Algo se te ha de haber pasado (?)

[@diegovera3230]

@@pedroolivas_ ya eh resuelto el problema, gracias

[@Julian-tt9ke]

como lo arreglaste?

[@Dxble_M]

ami tampoco me funciona y lo hago paso a paso, hace falta libreria de jquery?

[@identityliza4826]

El efecto no sirve, me aparece es un gran circulo de color en vez de la flecha y la transición al subir no es suave sino que es de una

[@bryanortiz2098]

Esta genial, pero un poco desordenado tu codigo css.

[@alejandrodemoraiz1559]

Como puedo hacer para que el boton ir arriba no recargue la pagina?

[@pedroolivas_]

Posiblemente te faltó agregar el código Javascript que evita eso.

[@creativepcfull]

En celular tmn se tiene que seguir viendo vdd ? :c como lo puedo ocultar

[@pedroolivas_]

Lo puedes dejar o también lo puedes ocultar, como quieras

[@davidmauricio9331]

geniall, bien expicado ;)

[@hrol100]

gracias men.

[@toxyspam3360]

El codigo?

[@desireesalazarmoro7812]

Muchas gracias por el video, pero tengo un problema, la función de subir la realiza clickeando desde cualquier parte de la página, incluso cuando hago click en algún link, o rellenando un formulario, etc... ¿Como puedo hacer que suba solo al clickear el botón?

[@pedroolivas_]

Revisa que estés seleccionando el elemento correcto.

[@juancruzmiro8465]

A día hoy hay alguien que sepa como hacer para que aparezca el icono de la flecha, porque hay mucha incertidumbre en los comentarios y no logro que aparezca

[@alexanderpasquale8693]

Es con libreria y además tenes que encontrar el mismo icono que utiliza, sino no sirve no pierdan el tiempo

[@gilbertoespinosasuero988]

😢 ya hice todo el código y no me salió nada pudiste conseguir la librería y el icono?

[@lgsusgeek]

Me funciono a la perfeccion bo, muchas gracias, sin embargo tengo un código que activa una sombra de mi Header cuando hago scroll hacia abajo y no me funciona ahora que hice este, ayuda por favor. :(

[@pedroolivas_]

Probablemente alguna clase le esté pegando al header

[@lgsusgeek]

@@pedroolivas_ He estado revisando y creo que es por la posición de la cabecera, le di una posición fija y no sé si eso afecte. Igual muchas gracias por dejarme saber

[@Djoako22]

GraciasS

[@juansebastianescobarcontre9523]

pa eso mas bien ponga los códigos en la descripción y ya