1

Hola buenas tardes tengo un menú donde utilizo waypoint para iluminar el botón según en la zona del scroll que es este en la web. Pero claro, necesito que al pulsar también esos botones me lleve hasta el id haciendo el scroll necesario, ya sea hacia arriba o hacia abajo. Ahora mismo lo tengo así:

<div class="col-3 filtraCookies">
    <div class="sticky-top2" id="menuSticky">
       <a rel="page-scroll" href="#used" id="usedMenu" class="activado-filtroCookies">USED ON THIS WEBSITE</a>
       <a rel="page-scroll" href="#desactivation" id="desactivationMenu" class="">DESACTIVATION/ELIMINATION</a>
    </div>            
</div> 

Con el a rel="page-scroll" href="#used" me lleva hasta ese punto, pero es posible animar ese scroll? yo cuando lo hacia en un botón concreto y un id concreto lo hacia así:

$("#usedMenu").on("click", function () {
   $('html, body').animate({
     scrollTop: $("#used").offset().top
   }, 2000);        
});

Pero tendría que hacer manualmente uno por uno, además de que esto solo hace scroll hacia abajo, no se si me confundo. Hay forma de aplicárselo a todos el scroll?

1 respuesta 1

1

Una opción sin Javascript para "animar" el desplazamiento es por medio de la propiedad scroll-behaviour:

html, body {
    scroll-behaviour: smooth;
}

El único problema es que no funciona en todos los navegadores, específicamente en versiones móviles.

Con jQuery no necesitas hacer una función por cada enlace, sino obtener todos los enlaces con el atributo rel="page-scroll", aunque se supone que debería ser automático, porque así es como debería funcionar, sin embargo, puedes intentar con esta función:

// Aplicar a enlaces que tengan el atributo
$('a[rel="page-scroll"]').on("click", function () {
    // Obtener ID de destino desde el enlace que recibió clic
    let hash = $(this).attr('href');
    $('html, body').animate({
        // menos altura de menú, para evitar que quede debajo
        scrollTop: $(hash).offset().top - 50
    }, 2000);
    // Quitar clase activa al enlace actual
    $('#menuSticky a.activo').removeClass('activo');
    // Activar enlace que recibió clic
    $(this).addClass('activo');
});
#menuSticky {
    position: fixed;
    top: 0;
}

a.activo {
    color: red;
}

#used, #desactivation {
    margin: 500px auto;
    background: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-3 filtraCookies">
    <div class="sticky-top2" id="menuSticky">
       <a rel="page-scroll" href="#used" id="usedMenu" class="activado-filtroCookies">USED ON THIS WEBSITE</a>
       <a rel="page-scroll" href="#desactivation" id="desactivationMenu" class="">DESACTIVATION/ELIMINATION</a>
    </div>            
</div>
<div id="used">Used on this Website</div>
<div id="desactivation">Desactivation / Elimination</div>

3
  • Muchas gracias @Triby funciona de forma perfecta, lo que pasa que cuando hace el scroll en waypoint no cambias hasta que muevo yo el scroll, pero en cuanto a la duda principal funciona perfectamente
    – Miguel
    Commented el 17 may. 2021 a las 15:45
  • 1
    @Miguel, dentro de la misma función se puede agregar el código necesario para cambiar el elemento de menú que está activo; revisa la respuesta actualizada, son solo dos líneas al final de la función.
    – Triby
    Commented el 17 may. 2021 a las 15:51
  • Brillante @Triby es espectacular!! muchas gracias! ;)
    – Miguel
    Commented el 17 may. 2021 a las 15:52

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.