it-swarm-es.com

¿Cómo hacer un ancla de menú de desplazamiento suave para un sitio de una página?

Tengo un sitio web hecho con Joomla 3.xy hago un menú (Agence, Regie Pub, Sitios de Internet, Servicios de Autres, Realizaciones y Contacto), quiero que cuando haga clic en cada uno de ellos redirijan a la sección en la página sin problemas. Antes usaba la extensión de anclaje de desplazamiento suave de PLUGINARIA, pero ahora ya no funciona porque no es gratis. Ahora quiero hacer mi propio desplazamiento suave creando un archivo javascript personalizado en mi plantilla helix 3 Framework.

Este es el código de mi menú:

<div class="sp-megamenu-wrapper">
   <a id="offcanvas-toggler" class="visible-sm visible-xs" href="#">
      <i class="fa fa-bars"></i>
   </a>
   <ul class="sp-megamenu-parent menu-fade hidden-sm hidden-xs">
      <li class="sp-menu-item current-item active"></li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#agence">Agence</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#regie-pub">Régie pub</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#sites-internet">Sites internet</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#autres-services">Autres services</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#realisations">Réalisations</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#contact">Contact</a>
         </li>
   </ul>

Quiero saber cómo puedo hacer eso con este tipo de menú que tengo. ¿Cómo puedo hacer que el anclaje de desplazamiento suave a la sección diferente de mi sitio de una página.

Saludos cordiales, Lordaker

2
lordaker

La aproximación de Aa Vanilla Javascript (más rápido que jQuery) sería la siguiente:

document.addEventListener('DOMContentLoaded', function () {
    function scrollTo(event) {
        event.preventDefault();

        var id = event.target.getAttribute('href').replace('#', '');
        var el = document.getElementById(id);

        if (el) {
            el.scrollIntoView({behavior: 'smooth', block: 'start'});
        }
    }

    var menuLinks = document.querySelectorAll('.scrollTo');

    if (menuLinks.length > 0) {
        for (var i = 0; i < menuLinks.length; i++) {
            menuLinks[i].addEventListener('click', scrollTo);
        }
    }
}

En Internet Explorer y Safari, no obtendrá el desplazamiento animado ya que ninguno de estos navegadores admite opciones dentro de la función scrollIntoView()

1
Lodder

Este código javascript que uso:

    //Smooth Scroll Menu
    $(document).ready(function(){

    $('ul.sp-megamenu-parent li.sp-menu-item > a').on('click', function(){

       //Toggle Class
       $(".active").removeClass("active");    
       $(this).closest('li').removeClass("active");
       var theClass = $(this).attr("class");
       $('.'+theClass).parent('li').addClass('active');

       //Animate
       $('html, body').stop().animate({
          scrollTop: $( $(this).attr('href') ).offset().top - 0
       }, 450);

       return false;

    });
});
0
lordaker