0

quiero hacer que cuando le den clic a mi enlace, que lleva a una misma parte de mi archivo HTML, tenga una transición un poco mas lento, estuve buscando y leyendo, pero no encontré nada. Gracias

2
  • Eso no se hace con css. Mira las opciones de scrollTop.
    – devconcept
    Commented el 27 nov. 2019 a las 21:37
  • con CSS tienes la propiedad scroll-behavior pero no puedes cambia la velocidad y no tiene soporte para algunos navegadores, IE por ejemplo
    – user7176
    Commented el 28 nov. 2019 a las 7:54

1 respuesta 1

0

Como te dicen no sería con CSS, esto podrías hacerlo con JavaScript.

Quiza este código te ayude:

// Seleccionas todos los elementos con la clase anchor
const anchors  = document.querySelectorAll('.anchor');

// A cada uno se le añade el evento click
anchors.forEach( (anchor) => {
    anchor.addEventListener('click', (e) =>{

        // Evita el comportamiento por defecto
        e.preventDefault();

        // Localiza el elemento al que referencia el ancla
        const elm = document.querySelector(anchor.getAttribute('href'));

        // Hace el scroll
        elm.scrollIntoView({block: "start", behavior: "smooth"});
    });
});

solo debes incluir este trozo de codigo JavaScript y poner a cada enlace de ancla que tengas la clase CSS anchor y se desplazará con smooth scroll.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.