Como hacer BOTÓN "PROFESIONAL" de ir ARRIBA con puro JavaScript 😎 ||

Поделиться
HTML-код
  • Опубликовано: 30 ноя 2024

Комментарии • 81

  • @marae70
    @marae70 2 года назад

    Hola! Lo probé y lo subi al servidor. Funciona perfecto!! Excelente. Muchas gracias por tu aporte.

  • @adrionbass
    @adrionbass Год назад

    Amigo sos un genio, humilde y digno de un gran abrazo

  • @sgvbox
    @sgvbox Год назад

    Buenísimo, yo simplificaría el condicional (... } else { buttonUp.style.transform = "scale(0)"; } ). Gracias!

  • @Perezafer8
    @Perezafer8 2 года назад

    MAN sos alto genio!! muchas gracias, muy buen tuto

  • @danielreyes8162
    @danielreyes8162 4 года назад +3

    Tengo tantos videos por ver de tu canal, gracias hermano, estoy seguro que aprenderé bastante.

  • @joskar00
    @joskar00 Год назад

    Muy bueno, me gusto que te detuvieras a explicar varios detalles.
    Grasias me sirvió mucho

  • @leomarqz
    @leomarqz 4 года назад +2

    Calidad, y bien explicado, perfecto para los que apenas estas empezando

  • @seica5561
    @seica5561 4 года назад

    Excelente .. Videos-- Muchas GRacias desde VEnezuela (27/09/2020).. Seguiré aprendiendo con sus cursos.

  • @carmen7606
    @carmen7606 2 года назад

    Genial, me saló perfecto. Muchas gracias.

  • @Magistrado1914
    @Magistrado1914 4 года назад +1

    Excelente curso
    Visto en 07/08/2020

  • @Wich183
    @Wich183 4 года назад +1

    Me está gustando mucho tu trabajo, gracias.

  • @hernanarica6389
    @hernanarica6389 3 года назад

    Super interesantes tus videos y lo mejor es que solo trabajas son javascript! Genio

  • @andresrosales4792
    @andresrosales4792 2 года назад

    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

  • @Enzog99
    @Enzog99 2 года назад

    Ecxelente amigo, muchas gracias!

  • @Sholedada
    @Sholedada 3 года назад

    Súper bien explicado, aprendí muchas cosas, mil gracias!!

  • @ed_garp2185
    @ed_garp2185 2 года назад +1

    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

  •  Год назад +1

    Eres un grande, gracias por traer vídeos de mucha calidad💯

  • @mh3mh0
    @mh3mh0 3 года назад

    Excelente video, lo acabo de ver y ahora lo voy a intentar realizar. Gracias!

  • @russelqp
    @russelqp 4 года назад +1

    Gracias por el video, bien explicado y de mucha ayuda.

    • @VisualAvalon
      @VisualAvalon  4 года назад

      Gracias amigo, me alegro mucho que te haya ayudado. Saludos!

  • @francnavarro44
    @francnavarro44 2 года назад

    Excelente vídeo, con Javascript puro como me gusta. Por algún motivo no me funcionó con scale, pero si con opacity o display .

  • @MrElBiitzzGF
    @MrElBiitzzGF 4 года назад +2

    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!

  • @sebas0ne
    @sebas0ne 3 года назад +2

    Para los que no les funciona el document.documentElement.scrollTop en la variable currentScroll, pueden reemplazarlo por window.scrollY.

  • @cristianvidal2824
    @cristianvidal2824 4 года назад

    Me suscribo porque fuiste el que mejor explicó!

  • @edsandoval13
    @edsandoval13 3 года назад

    ¡Saludos!, Excelente tutorial, completísimo, muchas gracias.

  • @retroblackztar
    @retroblackztar 3 года назад +1

    Excelente video brother, estoy empezando apenas en esto me sirvio muchisimo para practicar.

  • @AlvaroTejerina
    @AlvaroTejerina 4 года назад +2

    Muy buena explicación y funciona perfecto! saludos y mil gracias!

  • @isaacpiedrahitapolania8999
    @isaacpiedrahitapolania8999 4 года назад +3

    Hola magtimus seria bueno que crees tutoriales en udemy y con costo para aprender a crear paginas web

  • @wingsb7802
    @wingsb7802 3 года назад +1

    gracias amigo, buen tutorial

  • @crisnoahq
    @crisnoahq 4 года назад

    Super excelente el video,
    sigue asi
    me sirvio de mucho!...

  • @romuloalves9349
    @romuloalves9349 4 года назад +1

    Ótimo vídeo parabéns 👏.

  • @thepepeescalier
    @thepepeescalier 4 года назад

    Muy bonito detalle, gran calidad del tutorial, muchas gracias! Sigue asi!

  • @juliogomez8444
    @juliogomez8444 4 года назад +2

    Qué chévere. Te voy a estar apoyando. Con likes.

    • @VisualAvalon
      @VisualAvalon  4 года назад

      Muchas gracias amigo! Te lo agradeceré BASTANTE... Saludo éxito!

  • @andresromero592
    @andresromero592 4 года назад

    MagtimusPro buen dia, una pregunta que gotero utilizas para obtener el color de una pagina en hexadecimal?

  • @14K-s7e
    @14K-s7e 4 года назад

    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

  • @F4R1TH
    @F4R1TH 3 года назад

    Porque ya no subes videos? Si eres muy bueno bro. Sube cursos que tengo hambre de aprender, por favor

  • @benitezezequiel4674
    @benitezezequiel4674 2 года назад +1

    Grande magtimus :D

  • @GuillermoClar
    @GuillermoClar Год назад

    genial! gracias 1000 :) !!!

  • @romariotorresjimenez1737
    @romariotorresjimenez1737 2 года назад

    exelente contenido amigo

  • @santicristin3306
    @santicristin3306 2 года назад +1

    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

  • @ffran96
    @ffran96 4 года назад

    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

  • @inversoresmc755
    @inversoresmc755 Год назад

    Que bien gracias

  • @marlenenaupari9072
    @marlenenaupari9072 3 года назад +1

    GRACIAS !!!!

  • @patriciomarcosbibangmbasim2439
    @patriciomarcosbibangmbasim2439 2 года назад

    Mi tocayo

  • @tizokbalam3122
    @tizokbalam3122 2 года назад

    Gracias.

  • @marioalbertosurio4465
    @marioalbertosurio4465 Год назад

    Fantastico pana!

  • @Alexis-zy4iw
    @Alexis-zy4iw 3 года назад +1

    nuevo sub bro

  • @historyOn10
    @historyOn10 2 года назад

    hola! cuando vea la pagina desde el movil el boton no va hacia arriba y como que el scroll se traba. ¿que puedo hacer?

  • @izanpublicliente5926
    @izanpublicliente5926 4 года назад

    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

  • @alejandroceve
    @alejandroceve 3 года назад

    Me funciono bien en Firefox pero en los demás navegadores no... En todo caso, gracias.

  • @byroncruz2681
    @byroncruz2681 8 месяцев назад

    Gracias pa

  • @f4r1th-web5
    @f4r1th-web5 3 года назад

    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?

  • @ErnestoRC5991
    @ErnestoRC5991 4 года назад

    genial amigo

  • @Gonzalezandy27
    @Gonzalezandy27 4 года назад +1

    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

    • @kovenan
      @kovenan 3 года назад

      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.

  • @betojuega2.0
    @betojuega2.0 Год назад

    cómo se haría para ir hacia abajo?

  • @fershowfershow3164
    @fershowfershow3164 2 года назад

    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

  • @antoniojesusmoragalvan5471
    @antoniojesusmoragalvan5471 2 года назад

    como puedo hacerlo en react?

  • @daniel_loaiza6483
    @daniel_loaiza6483 2 года назад +1

    yo hice tan bien el tutorial que en vez de subir bajaba

  • @abeljhanomaquerasacaca2911
    @abeljhanomaquerasacaca2911 4 года назад +1

    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!

    • @silvianoperalta3098
      @silvianoperalta3098 4 года назад

      estoy igual :(

    • @thepepeescalier
      @thepepeescalier 4 года назад +1

      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.

  • @LeurysSuero
    @LeurysSuero 4 года назад +1

    Magtimus El archivo que pusiste para descargar esta desactualizado , esos archivos no tienen la programacion del boton .

    • @VisualAvalon
      @VisualAvalon  4 года назад

      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!

    • @LeurysSuero
      @LeurysSuero 4 года назад +1

      @@VisualAvalon Lo hago y no aparece

    • @VisualAvalon
      @VisualAvalon  4 года назад

      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...

  • @Jose-ju7fp
    @Jose-ju7fp 4 года назад

    Hola, me eliminaron del grupo me pueden volver a unir?

  • @belus819
    @belus819 4 года назад

    hola con el video intente hacer un botón hacia abajo y funciono, pero cuando quiero animarlo no funciona. Alguien sabe porque?

  • @cristianvidal2824
    @cristianvidal2824 4 года назад

    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!!

    • @Zincz124
      @Zincz124 3 года назад +1

      prueba con esto: var scroll = document.documentElement.scrollTop ||
      document.body.scrollTop;

    • @Sholedada
      @Sholedada 3 года назад +1

      @@Zincz124 Muchas gracias, me re sirvió!!

  • @imerconstanzo251
    @imerconstanzo251 4 года назад +2

    saludame plis

  • @silvianoperalta3098
    @silvianoperalta3098 4 года назад +1

    En el ultimo paso desaparece el botón :(

    • @cecirosales2563
      @cecirosales2563 2 года назад

      Hola, me pasa igual, pudiste solucionarlo?

  • @osmeig6025
    @osmeig6025 3 года назад

    28 minutos para hacer un botón hacia arriba?

  • @cristianvidal2824
    @cristianvidal2824 4 года назад

    No me toma el addEventListener("click", scrollUp); alguien me ayudaría?

    • @leonardocasanova7922
      @leonardocasanova7922 3 года назад

      yo tengo el mismo caso pudistes averiguar

    • @kovenan
      @kovenan 3 года назад

      @@leonardocasanova7922 ya revisaron el codigo? que no este mal escrito

  • @costaricadesignet5354
    @costaricadesignet5354 2 года назад

    demasiado largo tus videos

  • @lgsusgeek
    @lgsusgeek Год назад

    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)"
    }
    }