it-swarm-eu.dev

Come creare un ancoraggio del menu di scorrimento uniforme per un sito di una pagina?

Ho un sito Web realizzato con Joomla 3.x e creo un menu (Agence, Regie Pub, Sites Internet, Autres Services, Realizzazioni e Contatti), voglio quando faccio clic su ciascuno di essi reindirizzati alla sezione nella pagina senza problemi. Prima ho usato l'estensione di scorrimento liscia dell'ancoraggio di PLUGINARIA ma ora non funziona più perché non è gratuito. Ora voglio fare il mio scroll liscio creando un file javascript personalizzato nel mio modello helix 3 Framework.

Questo è il codice del mio menu:

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

Voglio sapere come posso farlo con questo tipo di menu che ho. Come posso rendere uniforme l'ancoraggio dello scorrimento fino alla sezione diversa del mio sito Web.

Cordiali saluti, Lordaker

2
lordaker

Aa Vanilla Javascript (più veloce di jQuery) approch sarebbe il seguente:

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

Su Internet Explorer e Safari, non otterrai lo scorrimento animato poiché nessuno di questi browser supporta le opzioni all'interno della funzione scrollIntoView()

1
Lodder

Questo codice javascript che 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