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>
   <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 class="sp-menu-item">
            <a class="scrollTo" href="#regie-pub">Régie pub</a>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#sites-internet">Sites internet</a>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#autres-services">Autres services</a>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#realisations">Réalisations</a>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#contact">Contact</a>

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.
    – arnoldk
    Commented Feb 20, 2018 at 15:02

2 Answers 2


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

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

        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


This javascript code I use :

    //Smooth Scroll Menu

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

       //Toggle Class
       var theClass = $(this).attr("class");

       $('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 and acknowledge you have read our privacy policy.

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