Hola, me encanto tu código, muy versátil y estético, pero me gustaría agregar lo siguiente: -si se saltan la parte del js donde hace scroll y solo dejen la parte del scale, o sea, si solo añaden la parte del js que tiene que ver con el scale; si hacen eso y en el html modifican el codigo y colocan lo siguiente: El botón funcionaria mas rápido y seria mas fácil de programar, tambien si solo agregan el link al html en vez de la seccion completa, justo como se ve arriba, se le podrá dar click a cualquier zona de la circunferencia y no solamente al icono
muy buen video , recomendaria hacerlos mas cortos porque ver 28 para un boton hacia arriba es un poco tedioso pero muy bueno igual. muchas gracias por compartir tus conocimientos
Hola tengo una pregunta, al poner este codigo del boton, no puedo poner en el css que mi html tenga scrollbehavior: smooth, alguno podria decirme como ocupar los dos? gracias
saludo amigo me gustaría ver un tutorial de schema.org lo que entiendo es un lenguaje de etiqueta de metadato esta etiquetas son para que los motores de búsqueda puedan encontrar con mas facilidad los contenido o archivos de nuestras paginas web gracia y saludo
Por favor necesito ayuda urgente.. Del buscador interno que creaste anteriormente, ¿como puedo hacer para que aparezca "no hay resultados" cuando se escribe algo en el buscador que no se encuentra? No lo he conseguido de ninguna forma y lo llevo intentando desde ayer, que ni dormi..Muchas gracias de ante mano
Hola una pregunta, hice todo al pie de la letra pero el boton no me funciona, lo que hice fue crear un archivo js nuevo y lo vincule en mi html pero no me hace el efecto de ir hacia arriba, que podria estar fallando? alguna ayuda porfa
Hola, Me están ayudando mucho tus videos. Podrías explicar como se podría hacer para que cuando cambio entre las diferentes subpáginas de mi página, no se vuelva a cargar otra vez la parte del menú y del footer? como reciclar ese código, y que tampoco esté cargándolo cada vez que cambio de una pestaña a otra de la página... No se si me he explicado bien. Leí algo de motores de plantillas, pero no se como aplicarlo a JavaScript. Muchas gracias, Fran
alguien sabe porque cuando aprieto el boton sube muy lento e hice exactamente como lo decia en el video edit: han pasado 13 horas desde que comenté y encontré el problema window.requestAnimationFrame(scrollUp); esta parte del codigo en js hacia que al presionar el boton subiera muy lento asi que lo quite y solo quedo este pedazo del codigo window.scrollTo (0, currentScroll - (currentScroll / 1)); y en vez de ponerle 10 le puse 1 y funciono talves no tan lento como en el video pero al menos no se nota tanto para que entiendan mejor estoy hablando de esta parte 18:52
CRACK, me quedé estancado en el ultimo paso, lo estaba implementando en un proyecto, pero a la hora de hacer q aparezca cuando bajas, ya no aparece....como crees que pueda encontrar el error, cuando el codigo está identico!
Si estás en chrome da clic derecho, después clic en "inspeccionar" y en la barra inferior que aparece busca la pestaña "console" ahí aparecen los errores, te especifica que fallo, el archivo y la linea en la que esta el error.
Si, claro que esos son los archivos actualizados... lo que pasa es que recuerda que debes hacer Scroll para que aparezca el botón, yo lo acabo de descargar y si está. Saludos!
Alguien me puede ayudar no sube hasta arriba eso que hice paso por paso pero con mis propias variables, no sube hacia arriba cuando presiono el botón ayuda!!
Brooooo, me funciono excelentemente bien, pero ahora no me funciona la sombra que tenía debajo de la cabecera y no tengo errores en la consola para que suceda eso ni en el CSS tampoco, he seguido tus dos tutoriales al pie de la letra y como quiera, qué crees que pueda ser? Te dejo los códigos para que veas klk. 😭💔 *-----------------------Código de la sombra de la cabecera-----------------------* window.onscroll = function() { scroll = document.documentElement.scrollTop; cabecera = document.getElementById("cabecera"); if (scroll > 15) { cabecera.classList.add("cabeceraMod"); } else if (scroll < 15) { cabecera.classList.remove("cabeceraMod"); } } *-----------------------Código del botón de scroll-----------------------* document.getElementById("botonArriba").addEventListener("click", scrollArriba); function scrollArriba() { var arriba = document.documentElement.scrollTop; if (arriba > 0) { window.requestAnimationFrame(scrollArriba); window.scrollTo(0, arriba - (arriba / 10)); botonArriba.style.transform = "scale(0)" } } botonArriba = document.getElementById("botonArriba"); window.onscroll = function() { var scroll = document.documentElement.scrollTop; if (scroll > 500) { botonArriba.style.transform = "scale(1)" } else if (scroll < 500) { botonArriba.style.transform = "scale(0)" } }
Amigo sos un genio, humilde y digno de un gran abrazo
Muy bueno, me gusto que te detuvieras a explicar varios detalles.
Grasias me sirvió mucho
Tengo tantos videos por ver de tu canal, gracias hermano, estoy seguro que aprenderé bastante.
Hola! Lo probé y lo subi al servidor. Funciona perfecto!! Excelente. Muchas gracias por tu aporte.
Calidad, y bien explicado, perfecto para los que apenas estas empezando
MAN sos alto genio!! muchas gracias, muy buen tuto
Excelente .. Videos-- Muchas GRacias desde VEnezuela (27/09/2020).. Seguiré aprendiendo con sus cursos.
Super interesantes tus videos y lo mejor es que solo trabajas son javascript! Genio
Ecxelente amigo, muchas gracias!
Me está gustando mucho tu trabajo, gracias.
Genial, me saló perfecto. Muchas gracias.
Hola, me encanto tu código, muy versátil y estético, pero me gustaría agregar lo siguiente:
-si se saltan la parte del js donde hace scroll y solo dejen la parte del scale, o sea, si solo añaden la parte del js que tiene que ver con el scale; si hacen eso y en el html modifican el codigo y colocan lo siguiente:
El botón funcionaria mas rápido y seria mas fácil de programar, tambien si solo agregan el link al html en vez de la seccion completa, justo como se ve arriba, se le podrá dar click a cualquier zona de la circunferencia y no solamente al icono
Excelente curso
Visto en 07/08/2020
Buenísimo, yo simplificaría el condicional (... } else { buttonUp.style.transform = "scale(0)"; } ). Gracias!
muy buen video , recomendaria hacerlos mas cortos porque ver 28 para un boton hacia arriba es un poco tedioso pero muy bueno igual. muchas gracias por compartir tus conocimientos
Que alto tienes el ego bro pero es que eres grande! Muy buen video amigo me gusto mucho tu forma de explicar. Suerte en tus proyectos!
Eres un grande, gracias por traer vídeos de mucha calidad💯
Excelente video brother, estoy empezando apenas en esto me sirvio muchisimo para practicar.
Súper bien explicado, aprendí muchas cosas, mil gracias!!
Muy buena explicación y funciona perfecto! saludos y mil gracias!
Excelente video, lo acabo de ver y ahora lo voy a intentar realizar. Gracias!
Me suscribo porque fuiste el que mejor explicó!
Gracias por el video, bien explicado y de mucha ayuda.
Gracias amigo, me alegro mucho que te haya ayudado. Saludos!
gracias amigo, buen tutorial
¡Saludos!, Excelente tutorial, completísimo, muchas gracias.
Qué chévere. Te voy a estar apoyando. Con likes.
Muchas gracias amigo! Te lo agradeceré BASTANTE... Saludo éxito!
Excelente vídeo, con Javascript puro como me gusta. Por algún motivo no me funcionó con scale, pero si con opacity o display .
Hola tengo una pregunta, al poner este codigo del boton, no puedo poner en el css que mi html tenga scrollbehavior: smooth, alguno podria decirme como ocupar los dos? gracias
Hola magtimus seria bueno que crees tutoriales en udemy y con costo para aprender a crear paginas web
Porque ya no subes videos? Si eres muy bueno bro. Sube cursos que tengo hambre de aprender, por favor
Grande magtimus :D
exelente contenido amigo
Super excelente el video,
sigue asi
me sirvio de mucho!...
Muy bonito detalle, gran calidad del tutorial, muchas gracias! Sigue asi!
Para los que no les funciona el document.documentElement.scrollTop en la variable currentScroll, pueden reemplazarlo por window.scrollY.
MagtimusPro buen dia, una pregunta que gotero utilizas para obtener el color de una pagina en hexadecimal?
genial! gracias 1000 :) !!!
Ótimo vídeo parabéns 👏.
hola! cuando vea la pagina desde el movil el boton no va hacia arriba y como que el scroll se traba. ¿que puedo hacer?
saludo amigo me gustaría ver un tutorial de schema.org lo que entiendo es un lenguaje de etiqueta de metadato esta etiquetas son para que los motores de búsqueda puedan encontrar con mas facilidad los contenido o archivos de nuestras paginas web gracia y saludo
Por favor necesito ayuda urgente.. Del buscador interno que creaste anteriormente, ¿como puedo hacer para que aparezca "no hay resultados" cuando se escribe algo en el buscador que no se encuentra? No lo he conseguido de ninguna forma y lo llevo intentando desde ayer, que ni dormi..Muchas gracias de ante mano
AL momento de subir mi página a un hosting el botón no sirve, pero cando lo pruebo localmente si funciona. ¿qué puedo hacer?
GRACIAS !!!!
Hola una pregunta, hice todo al pie de la letra pero el boton no me funciona, lo que hice fue crear un archivo js nuevo y lo vincule en mi html pero no me hace el efecto de ir hacia arriba, que podria estar fallando? alguna ayuda porfa
intenta ver que en archivo js, esta bien escrito, de lo contrario copia el directorio de su github y lo usas, espero haber sido de ayuda.
nuevo sub bro
Gracias.
Hola,
Me están ayudando mucho tus videos. Podrías explicar como se podría hacer para que cuando cambio entre las diferentes subpáginas de mi página, no se vuelva a cargar otra vez la parte del menú y del footer? como reciclar ese código, y que tampoco esté cargándolo cada vez que cambio de una pestaña a otra de la página... No se si me he explicado bien. Leí algo de motores de plantillas, pero no se como aplicarlo a JavaScript.
Muchas gracias,
Fran
Que bien gracias
Fantastico pana!
Mi tocayo
alguien sabe porque cuando aprieto el boton sube muy lento e hice exactamente como lo decia en el video
edit: han pasado 13 horas desde que comenté y encontré el problema window.requestAnimationFrame(scrollUp); esta parte del codigo en js hacia que al presionar el boton subiera muy lento asi que lo quite y solo quedo este pedazo del codigo window.scrollTo (0, currentScroll - (currentScroll / 1)); y en vez de ponerle 10 le puse 1 y funciono talves no tan lento como en el video pero al menos no se nota tanto para que entiendan mejor estoy hablando de esta parte 18:52
CRACK, me quedé estancado en el ultimo paso, lo estaba implementando en un proyecto, pero a la hora de hacer q aparezca cuando bajas, ya no aparece....como crees que pueda encontrar el error, cuando el codigo está identico!
estoy igual :(
Si estás en chrome da clic derecho, después clic en "inspeccionar" y en la barra inferior que aparece busca la pestaña "console" ahí aparecen los errores, te especifica que fallo, el archivo y la linea en la que esta el error.
Magtimus El archivo que pusiste para descargar esta desactualizado , esos archivos no tienen la programacion del boton .
Si, claro que esos son los archivos actualizados... lo que pasa es que recuerda que debes hacer Scroll para que aparezca el botón, yo lo acabo de descargar y si está. Saludos!
@@VisualAvalon Lo hago y no aparece
Mira a ver en este enlace: magtimus.github.io/proyectos/pagina-tipo-blog/blog.html
Ese es el mismo proyecto que he dejado para descargar...
Gracias pa
Me funciono bien en Firefox pero en los demás navegadores no... En todo caso, gracias.
como puedo hacerlo en react?
cómo se haría para ir hacia abajo?
genial amigo
hola con el video intente hacer un botón hacia abajo y funciono, pero cuando quiero animarlo no funciona. Alguien sabe porque?
yo hice tan bien el tutorial que en vez de subir bajaba
Hola, me eliminaron del grupo me pueden volver a unir?
Alguien me puede ayudar no sube hasta arriba eso que hice paso por paso pero con mis propias variables, no sube hacia arriba cuando presiono el botón ayuda!!
prueba con esto: var scroll = document.documentElement.scrollTop ||
document.body.scrollTop;
@@Zincz124 Muchas gracias, me re sirvió!!
28 minutos para hacer un botón hacia arriba?
No me toma el addEventListener("click", scrollUp); alguien me ayudaría?
yo tengo el mismo caso pudistes averiguar
@@leonardocasanova7922 ya revisaron el codigo? que no este mal escrito
saludame plis
En el ultimo paso desaparece el botón :(
Hola, me pasa igual, pudiste solucionarlo?
demasiado largo tus videos
Brooooo, me funciono excelentemente bien, pero ahora no me funciona la sombra que tenía debajo de la cabecera y no tengo errores en la consola para que suceda eso ni en el CSS tampoco, he seguido tus dos tutoriales al pie de la letra y como quiera, qué crees que pueda ser? Te dejo los códigos para que veas klk. 😭💔
*-----------------------Código de la sombra de la cabecera-----------------------*
window.onscroll = function() {
scroll = document.documentElement.scrollTop;
cabecera = document.getElementById("cabecera");
if (scroll > 15) {
cabecera.classList.add("cabeceraMod");
}
else if (scroll < 15) {
cabecera.classList.remove("cabeceraMod");
}
}
*-----------------------Código del botón de scroll-----------------------*
document.getElementById("botonArriba").addEventListener("click", scrollArriba);
function scrollArriba() {
var arriba = document.documentElement.scrollTop;
if (arriba > 0) {
window.requestAnimationFrame(scrollArriba);
window.scrollTo(0, arriba - (arriba / 10));
botonArriba.style.transform = "scale(0)"
}
}
botonArriba = document.getElementById("botonArriba");
window.onscroll = function() {
var scroll = document.documentElement.scrollTop;
if (scroll > 500) {
botonArriba.style.transform = "scale(1)"
}
else if (scroll < 500) {
botonArriba.style.transform = "scale(0)"
}
}