web-dev-qa-db-fra.com

Comment faire une ancre de menu de défilement lisse pour un site d'une page?

J'ai un site Web fait avec Joomla 3.x et faire un menu (Agence, Regie Pub, Sites Internet, Autres Services, Réalisations et Contact), je veux quand je clique sur chacun d'eux, ils redirigent vers la section de la page. Avant, j’utilisais l’ancre d’extension smooth scroll de PLUGINARIA, mais maintenant, il ne fonctionne plus car il n’est pas gratuit. Maintenant, je veux créer un fichier javascript personnalisé dans mon framework helix 3 template.

C'est le code de mon 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>

Je veux savoir comment je peux faire cela avec ce type de menu que j'ai. Comment puis-je faire défiler en douceur l'ancre de défilement à la section differente de mon site onepage.

Cordialement, Lordaker

joomla-3.xextensionscustom-action
2
lordaker

Aa Vanilla Javascript (plus rapide que jQuery) serait comme suit:

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

Sous Internet Explorer et Safari, le défilement animé n’est pas disponible, car aucun de ces navigateurs ne prend en charge les options de la fonction scrollIntoView().

1
Lodder

Ce code javascript que j'utilise:

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