Skip to main content
Mostrar enlace activo en menú
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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>

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);        
});
#menuSticky {
    position: fixed;
    top: 0;
}

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

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>

Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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);        
});
#menuSticky {
    position: fixed;
    top: 0;
}

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