Curso JavaScript: 87. DOM: Ejercicios Prácticos | Botón de Scroll -

[@Juankybi]

muy buen ejercicio, me hecha humo mi cabeza. Tengo que colocarle un disipador. Hay otro canal que es Pildoras Informaticas, pero no da JavaScript. Ese Señor de ese canal, realiza cursos gratis como tu de Java y otros lenguajes. Digamos que ese señor y tu sois de lo mejor. Y eso que he visitado decenas de canales. Pero todos pecan de explicar las cosas con prisas y no como vosotros. Vosotros lo haceis despacito y bien, paso a paso. Ambos sois, para mi, motivacion suficiente para seguir en algo que ya pensé que jamas podria hacer... programar!

[@jonmircha]

:)

[@leomax522]

Excelente explicación, magistral tu forma de transmitir conocimientos. Gracias por todo.

[@jonmircha]

Con mucho gusto👋🏻😉

[@MaxielJohannaCamargoGomez]

Literalmente soy nueva en JS he realizado todos los ejercicios y ha sido todo un reto. Nunca antes había realizado algo igual, básicamente copio todo tal como lo hace el profe, pero gracias a seguir todo el curso he logrado ir desarrollando más la lógica y entender el porque se usa determinada parte del lenguaje para solucionar el problema o reto que se tenga. Mil gracias profe, al menos ahora abro un archivo JS y entiendo lo que veo. ETERNAMENTE AGRADECIDA

[@jonmircha]

;)

[@gastontimchuk2295]

Muy bueno el ejercicios yo lo pude aplicar de otra manera a continuacion se los dejo por si les sirve. Grande Jon! d.addEventListener("scroll", (e) => { const html = d.querySelector("html"); const scrollYes = html.getBoundingClientRect(); const scroll = d.querySelector(".button-scroll"); console.log(scrollYes); if (scrollYes.y < -200) { scroll.classList.remove("disabled"); scroll.classList.add("enabledscroll"); } else { scroll.classList.remove("enabledscroll"); scroll.classList.add("disabled"); } });

[@jonmircha]

👍🏻

[@EducacionCultura1992]

Excelente👏🏽

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy buen curso!!!

[@jonmircha]

Gracias por comentar

[@Ni_idea_de_tecnologia]

Muy buen ejercicio y muy fácil de ejecurar si entendemos las partes del documento y las de window. Muchas gracias por sus explicaciones Sr. Mircha

[@jonmircha]

👋🏻😉

[@danielhincapievargas4551]

Hola Jon, gracias a tus clases aprendo JS a mi ritmo y con una explicación excelente. Solo quería comentar que el scrollTo() ya te hace por defecto una transición suave. Entonces en el caso de este ejercicio solo tienes que poner w.scrollTo(0, 0)

[@jonmircha]

👍🏻

[@carloscontreras6051]

A full con los ejercicios!!!!!! Un comentario, yo hice el if con scrollY, buscando encontre ese en vez de pageYOffset, segun "canIuse", tienen el mismo soporte Y acabo de ver que varios lo hicieron igual...

[@jonmircha]

👍🏻

[@gabrielcarrasco5650]

Aporta mucho valor!

[@jonmircha]

😉👍🏻

[@davidmena5137]

Gracias totales docente, saludos desde Perú.

[@jonmircha]

🤓👍🏻

[@srcuyo]

hola soy tu amigo y estudiante digital! Gracias por tanto

[@jonmircha]

😉👋🏻

[@luisluna8900]

sin ver la solucion lo que utilice fue la propiedad w.scrollY y apartir de ahi agregar o remover, como colocque un enlace denteo para dirigir el desplazamiento, pero este modo esta super cool , siempre aprendiendo nuevas cosass, graciasssssss mil

[@jonmircha]

👍🏻😉

[@instintoimagen]

muchas gracias! es el mejor #curso de #JavaScript

[@jonmircha]

Gracias, saludos!

[@Dousan87]

87 clases (Videos) despues por fin aprendí por lo que hace mucho tiempo quería estudiar JS, hacer ese bendito botón. (es raro lo sé, pero era una funcionalidad que siempre quise aprender de base y no siguiendo un tutorial) jajaj, muchas gracias maestro!

[@jonmircha]

🤗

[@carlosjavierorozco8418]

Uff estos ejercicios estan fenomenales! Muchas gracias por el esfuerzo puesto en este curso!

[@jonmircha]

😉👋🏻

[@Bisson156]

Muy bueno Jon muchas gracias nuevamente! El portfolio esta quedando brutal gracias a todo lo que nos enseñas. Buen fin de semana!

[@jonmircha]

😮🔥😉👍🏻

[@leonardoprone5967]

Excelente clase, Jon, muy útil! Muchas gracias!

[@jonmircha]

😉👍🏻

[@johnherrera5913]

Master! Muchas gracias, tus tutoriales son realmente buenos.

[@jonmircha]

Con mucho gusto

[@javierovallea3836]

Quiero agradecerle Profesor, este curso me a ayudado mucho a superarme.

[@jonmircha]

Felicidades!

[@carlosvelasquez1913]

Excelente video amigo , explicas de una manera increíble gracias por compartir tus conocimientos , sigue así :)

[@jonmircha]

🙌🏻🥰

[@tongastonga22]

Gracias Jon !

[@jonmircha]

Con gusto👋🏻😉

[@totenkorpf]

muy bueno jon! estaba tratando de hacer un navbar que cuando el usuario haga scroll hacia abajo tenga un bg-color determinado y cuando el scrollTop este en la posicion 0 se transparente y este video me vino como anillo al dedo!

[@jonmircha]

😉👍

[@nickname1000]

¡Gracias!

[@jonmircha]

😃👍🏻

[@danielfabiani4468]

Gracias Jon, en estos ejercicios se ve la importancia de saber algo de CSS. Saludos

[@jonmircha]

😉👍🏻

[@fadelsalem4172]

Genial. Ademas de window.pageYOffset y document.documentElement.scrollTop hay tambilen: window.scrollY. Es solo para dar comentarios , Jon 🙂

[@jonmircha]

👍🏻

[@timawid]

Excelente ✅

[@jonmircha]

👋🏻😉

[@nachosanabria6942]

gracias excelente curso

[@jonmircha]

Gracias por comentar

[@victormontivero1998]

Gran video, este si lo había podido razonar solo, algunos de los anteriores no pude, pero aún así voy aprendiendo mucho de la forma en la que se hacen las cosas y cuando termine de hacer el curso voy a probarme de nuevo a hacer todos los ejercicios para ver si he adquirido más lógica y tratar de hacer algunas variaciones.

[@jonmircha]

;)

[@addevmoises]

que genial, tendré en cuenta este ejercicio para realizar en mis proyectos

[@jonmircha]

:)

[@Isaaczfg]

Esta son mis soluciones a los ejercicios hasta el momento Sitio: priceless-jackson-fb66b4.netlify.app/ GitHub (Para ver codigo): github.com/isaacFierrog/ejerciciosDOM.git A seguir aprendiendo compañeros!!!

[@jonmircha]

🤓👍🏻

[@hernangarcia77]

Eres grande Mircha!!! Muchas Gracias!!

[@jonmircha]

Un saludo!

[@miguelantonioescuderoperal7485]

Maestro mircha que buen video, logre hacerlo algo parecido a su codigo tuve que investigar sobre los eventos del scroll para poder resolverlo y si lo consegui , gracias JonMircha

[@jonmircha]

;)

[@danielacatriel2543]

muy bueno!

[@jonmircha]

Gracias!

[@genecles]

Hola. Buenisísima tu explicación de este tema como siempre. Saludos.

[@RetromanDVJ]

Gracias! tendrás algún video similar pero con un div en el centro y que tenga contenido con scroll horizontal ? Saludos.

[@jonmircha]

En mis cursos de CSS

[@jebusxuy]

El profe Jon creando los estilos para el botón y yo reutilizando todo lo del anterior, solo no sé si estuvo bien que usara la propiedad ScrollY, en lugar de las que se usaron para resolver el ejercicio. Voy por mi tercer intento de este curso y al fin se me están grabando las cosas en mi memoria.

[@jonmircha]

👋🏻😉

[@echak6902]

Genial como siempre!! Hay alguna forma de hacer que el botón de scroll aparezca cuando tengamos un scroll en la ventana del 50% en lugar de en píxeles? Un saludo!!!

[@AngelSalazar-uf5fk]

Amigo jon, puedes responderme cuando puedas. Yo lo hice con mi lógica de la siguiente manera y me funciona perfectamente, pero si bien algo he aprendido en este mundo de la programación es a desconfiar de la lógica inmediata jaja, entonces me gustaría saber si está mal hacerlo de esta forma: d.addEventListener("scroll", (e) => { if(scrollY >= 400){ $btnscroll.classList.add("hidden") }else if(scrollY { window.scrollTo(0,0); }) })

[@baironguerra5405]

muy bueno, gracias jon

[@jonmircha]

Con gusto

[@ronalddavidhernandezpadill8182]

Hice el botón de scroll a mi manera ahora veré la tuya

[@jonmircha]

👋🏻😉

[@kikemadrigalr]

saludos Jon, saludos a todos los compañeros. Paso a dejar mi solución para este ejercicio. Creo que es el que menos tiempo me ha tomado hacer. utilice un objeto window.scroll para asignar los valores que tomaría al hacer click en el botón. Y la transición de entrada y salida la hice con CSS. codepen.io/kikemadrigalr/pen/MWydQKw

[@kikemadrigalr]

Justo right: calc() era todo lo que necesitaba para que mi ejercicio estuviese mucho mas optimo.. Pues por lo demás creo que en lineas generales lo hice muy similar. Gracias por seguir enseñándome algo nuevo cada día

[@TheDawnBreaker9146]

Gracias Jon, una pregunta cuando se recomienda colocar {} en los import del DOM y cuando no. Gracias

[@jonmircha]

destructuración cuando no usas default, cuando sí lo usas no es necesario la destructuración

[@TheDawnBreaker9146]

@@jonmircha Muchas gracias, estoy disfrutando al máximo este curso

[@PalestinianCode]

Top de top👍👍👍👍

[@jonmircha]

😉👍🏻

[@dvesc]

@jonmircha, tengo una duda con el codigo CSS, yo he estado creando archivos separados por cada ejercicio los cuales solo modifican los estilos de dichos ejercicios por ejemplo: "reloj.css" o "countdown.css" y asi, a su vez tengo un "index.css" donde esta el "formateo" y los estilos generales de la pagina como el estilo de la barra principal o el de las secciones.....mi duda es: Esto es bueno hacerlo? o es mejor tener todos los estilos en un solo archivo????

[@jonmircha]

YO prefiero todo en un archivo

[@juancamiloparedeszamora8481]

Excelente material, una pregunta; porque no se usó "window.scrollY" visto en clases anteriores para el ejercicio, ¿Hay algún problema si se hace con este atributo?

[@jonmircha]

no

[@TheWaalteers]

Hola! porque cuando escuchas el evento 'scroll' lo haces en referencia del objeto 'windows' y no desde el 'document'? probé cambiandolo al document e igualmente funciona, pero no se si habrá alguna diferencia o tendrá algun problema mas adelante.

[@matiasromera330]

Jon amigo y docente digital, caballero dorado de la casa de Géminis, me surgió una duda con éste vídeo respecto del anterior, pensé que íbamos a hacer como hicimos con el evento keydown de no incluirlo en el domcontentloaded y asignarlo al evento directamente, o capaz se puede de ambas formas, sinceramente me mareó un poco. Espero que puedas tirarme algún centro! 🤗

[@jonmircha]

Se pueden ambas Matias de Virgo 🤭

[@yovanyescobarrojas2041]

profe mircha trate de hacerlo yo mismo pero no pude, solo hice que el boton apareciera y desapareciera al evento scroll ,y reconocer el boton al evento click, no savia de esa propiedad scrollto pero de todos modos no estaba tan perdido muchas gracias mircha, saludos desde colombia.

[@jonmircha]

😉👍🏻

[@estebanoctaviopavezllanca2385]

Estimado adjunto ejercicio github.com/Stev-189/Ejercicio_DOM Gracias Profe.-

[@alvaromorales3310]

Muy buen video! (y)

[@jonmircha]

Gracias!

[@miktl]

Maestro para el scroll yo lo hice con window.scrollY funcionó pero esta bien o hay algún problema? para el boton use la etiqueta "a" con el href a seccion 1, para no usar js.

[@jonmircha]

👍🏻

[@heimancastro1954]

🥰🥰🥰

[@jonmircha]

👋🏻😉

[@oscarcordova9292]

Hola Jonatan, tengo una pregunta yo trabajo con laravelmix de laravel para procesar mi css y js. pero tengo problemas con detectar algunos eventos como el scroll. sabras que podría estar afectándome? saludos

[@jonmircha]

Ni idea, no conozco esa herramienta, revisa en la doc o en stackoverflow quiza alguién tenga esa misma peculiaridad

[@oscarcordova9292]

@@jonmircha Gracias por el tiempo (y), saludos

[@rowilmoran7321]

me salió el ejercicio sin ver el video. =D, lo único es que puse un y por default sube hacia al top de la pagina .

[@jonmircha]

Excelente!

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@2012patry]

pageYOffset me dice que esta en desuso... deprecado... seria que puedo utilizar scrollY ?

[@jonmircha]

Sí

[@braianrico4422]

🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

😉👍🏻

[@Juankybi]

.scroll-top-btn { right: 10vw; tuve que dejarlo asi, porque no me funciona calc. Espero no ser muy pesado

[@andycelularesandy5191]

yo lo deje rigth: 0

[@ronaldm.r]

El smooth no me funciona ni con el css, dicen que es una propiedad experimental, por ende no le funciona a todos los usuarios

[@helipalacio8772]

👨

[@jonmircha]

👋🏻😉

[@srgiochu8936]

Hola, como puedo hacer para que el boton que aprece en android y windows , muy bien, mantenga los estilos en MAC o en iphone ???

[@jonmircha]

Apple implementa cierta presentación a los botones tendrías que inspeccionar los estilos y resetearlos.

[@edwina.espinaltaveras4222]

para yo hacer que el boton subiera al tope tuve que crear un div arriba del header y luego hacer un ancla jajja lo cambiare a como esta en e video

[@jonmircha]

😉👍 lo importante es que lo hiciste

[@lucasciapparelli4974]

Como hago para que la flecha ( &#11014; ) se me ponga negrita simple. Porque se me pone con fondo celeste y queda muy feo.

[@jonmircha]

con CSS aplícale el color que quieras al botón

[@MrRampengu]

Aaa no me hace la transición suave en el método scrollTo(), me fije en stackoverflow pero supuestamente ya con el mismo código del vídeo se podría deber hacer..

[@brauliodesouza880]

es un problema del browser.

[@brayanorellanos9367]

scrollY da lo mismo

[@user87546]

Me molesta el punto y coma que se agrega con el autocompletar siempre al final. Saben si se puede sacar solo lo del punto y coma?

[@fernandocaste6904]

Si ahora JS desde el ECMA 2016 creo ya no es necesario el punto y coma

[@euronymous_]

para seleccionar el elemento del boton usé getElementById(button). Pero no me funciona. Cuando lo cambié a querySelector comenzó a funcionar ¿por que pasa esto?

[@jonmircha]

Si tu variable button tenía el # por eso no te funcionaba con getElementById

[@euronymous_]

@@jonmircha la variable no tenia el #, aun así el metodo no funciona, cuando cambié el método por querySelector("#btn-scroll") comenzó a funcionar... no se que pasa.

[@euronymous_]

@@jonmircha lo mismo ocurre en el siguiente ejercicio, uso getElementByid("btn-theme") no funciona, cuando cambio el método y coloco el # por supuesto que si funciona

[@jonmircha]

@@euronymous_ La I de Id va en mayúsculas

[@euronymous_]

@@jonmircha buah, ese fue un error mio: en el código está con I en mayuscula: ya revise el nombre del id en la etiqueta, lo copié y lo pegué en la llamada a la funcion, pero nada... le pongo el # y cambio el método y funciona. ¿que podrá ser?

[@ryuzakibakura8229]

no se por que a mi solo me funciona una sola vez el botón de subir, si lo uso y vuelvo a bajar, al precionarlo de nuevo ya no sube, tengo que racargar la pagina para que vuelva a funcionar una sola vez ={

[@DanielLozadaDev]

No entiendo por qué nunca me funciona el behavior: smoot o scroll-behavior: smoot y eso que tengo todo actualizado :(

[@jonmircha]

En que navegador estas ?

[@DanielLozadaDev]

@@jonmircha Google Chrome

[@jonmircha]

@@DanielLozadaDev que raro

[@DanielLozadaDev]

@@jonmircha ya descubrí por qué era y es que en las opciones de rendimiento del equipo le había configurado para que tuviera mayor rendimiento y eso fue porque antes tenía solo 4GB de memoria RAM pero la expandí y olvidé activar las animaciones del sistema operativo..

[@jonmircha]

@@DanielLozadaDev :)

[@federicoraulmaciasaparicio1339]

Dejo la resolución del modo dark. codepen.io/Scipio14/pen/yLeNZLj

[@jonmircha]

Muy bien :)

[@Juankybi]

d.document.documentElement.scrollTop es siempre 0. Utilizo tambien como tu, Firefox. Pero nada. No me salen valores. He mirado en la documentacion y comentan que es una opcion no bien soportada por los navegadores. Ademas w.pageYOffset, me sale con muchos decimales. No entiendo, cómo en 3 meses de tu publicacion a esta parte haya tantos problemas en el codigo. Algunas soy yo, que soy novato, pero otras, da la sensacion que es por cambios del codigo de los navegadores. No se si me puedes confirmar o desmentir algo.

[@pablocruz1365]

Amigo, document se ha declarado desde el inicio, por lo tanto no es correcto poner d.document.documentElement, si no nada mas, d.documentElement. Saludos :)

[@devangel1698]

Hola, muchisimas gracias por la enseñanza me sirvio de mucho, lo que no me funciona es el comportamiento smooth al hacer clic en el boton, lo unico distinto que uso es el manejador del evento 'click' asi objButton.addEventListener("click", () => { window.scroll({behavior: 'smooth', top: 0}) }); que podria ser ?? help me xD mi navegador es Chrome ultima versión PD: En Firefox me funciona, como hacerlo para que funcione en ambos ??? ni menciono mejor IE XD

[@jonmircha]

Súbelo a un codepen así platicadito no puedo saber que pasa

[@devangel1698]

@@jonmircha Gracias por responder Jon te dejo el codepen codepen.io/AMillanir/pen/XWXXQeM

[@jonmircha]

a mi me funciona :P

[@devangel1698]

@@jonmircha te funciona en chrome y en firefox ? Yo uso chrome

[@jonmircha]

Sí en ambos incluso en edge

[@YuriMayakoskiSivizaca]

Enlace a ejercicio con dos botones el de Jon y el mio github.com/mayakoski/exercisesDOM/tree/2530dfa355e635ba25aecb5e2a0bef0843259a86

[@kunjilee9810]

Aqui esta mi codigo profe!! codepen.io/Kunjo_/pen/qBaGPXa , unicamente te envie el javascript de el boton , por eso es que los demas ejercicios no funcionan