2

I have a website made with Joomla 3.x and make a menu (Agence, Regie Pub, Sites Internet, Autres Services, Realisations and Contact), I want when I click on each of them they redirected to the section in the page smootly. Before I used the extension smooth scroll anchor of PLUGINARIA but now he don't work anymore because is not free. Now I want to make my own smooth scroll by create a custom javascript file in my template helix 3 Framework.

This is the code of my 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>

I want know how can I do that with this kind of menu that I have. How can I make I smooth scroll anchor to the differente section of my onepage site.

Best regards, Lordaker

  • And I want when I click on a one menu he get an active class. How do that I try with code but all my "li" take the class active. – thewebinart Feb 20 '18 at 15:02
1

Aa vanilla Javascript (faster than jQuery) approch would be as follows:

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

On Internet Explorer and Safari, you won't get the animated scroll as neither of these browsers support options within the scrollIntoView() function

0

This javascript code I use :

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

    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.