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....
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??
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'.
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
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
@@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.
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?.
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.
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.
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_ 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
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?
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
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....
Simple, sencillo, elegante y muy bien explicado. Te felicito.
El código no funciona si no da la librería y el icono tiene que poner esa información también.
a mi tampoco
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!
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??
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'.
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
Muchísimas gracias !! Me encanto la explicación y la sencillez.
Hola el js de clic y scrool se puede aplicar a un boton ya existente en mi web? Gracias 🫂
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
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
muchas gracias bro!
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?
Tambien tengo esa duda 🤧
Creo que es porque tiene (y no muestra) font awesome (creo) y es una clase de font awesome para que muestre con el flechita.
@@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.
Cómo hago para q funcione con flechas, para. En el la tv funcione con el control remoto de fechas ? Porfis
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
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?.
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.
intente agregarlo a una pagina que tenia, pero no salio e hize tal cual como en el tutorial, porque?
Algo se te ha de haber pasado (?)
@@pedroolivas_ ya eh resuelto el problema, gracias
como lo arreglaste?
ami tampoco me funciona y lo hago paso a paso, hace falta libreria de jquery?
Muy buen vídeo me ayudo mucho gracias
Como puedo hacer para que el boton ir arriba no recargue la pagina?
Posiblemente te faltó agregar el código Javascript que evita eso.
en 12:12 como creaste esa función de flechas? es que no encuentro ese simbolo raro que va despues del igual
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.
Lo que dijo Bryan es correcto.
Esta genial, pero un poco desordenado tu codigo css.
En celular tmn se tiene que seguir viendo vdd ? :c como lo puedo ocultar
Lo puedes dejar o también lo puedes ocultar, como quieras
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. :(
Probablemente alguna clase le esté pegando al header
@@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
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?
Revisa que estés seleccionando el elemento correcto.
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
Me gusto tu video... Muchas gracias
Muy buen video bro!
Podrias compartir por favor ese codigo de la libreria de font awesome? 0:36
Hasta yo necesito ese código ya lo tiene ?
gracias men.
El codigo?
Es con libreria y además tenes que encontrar el mismo icono que utiliza, sino no sirve no pierdan el tiempo
😢 ya hice todo el código y no me salió nada pudiste conseguir la librería y el icono?
geniall, bien expicado ;)
pa eso mas bien ponga los códigos en la descripción y ya
GraciasS