Scroll down auto add active class on horizontal mobile nav, then slide nav class item into viewport automatically

Question

I have a demo nav working as you scroll down to anchor tags that horizontal scroll nav ontop is fixed/sticky and jquery will add active class to the nav item as you scroll by it.

However on mobile the nav should also auto slide into the viewport when the nav item is scroll to and turned into active.

How is this accomplished? Left(); or something?

jQuery(document).ready(function( $ ) {
    
$('.column-1').each((index, item) => {  
    var img = $(item).html(); 
    $(item).html('<img class="wow fadeIn" src="' + img + '">'); 
});

var sections = $('section');
var nav = $('nav');
var navHeight = nav.outerHeight();

$(window).on('scroll', function () {
    var curPos = $(this).scrollTop();
    sections.each(function(index,element) {
        var secPos = $(this).offset().top;
        var secHeight = $(this).outerHeight();
        var contentTop = secPos - navHeight;
        var bottom = contentTop + secHeight;
        
        if (curPos >= contentTop && curPos <= bottom) {
            var act = nav.find('a[href="#'+$(this).attr('id')+'"]');
            var topOfWindow = $(window).scrollTop();
            var pageHeight = $(window).height();
            nav.find('a').removeClass('active');
            act.addClass('active');
            slideMenu(act);
            

            
            if(topOfWindow===0) {    //Hides the menu when scroll touches page top
                nav.find('a').removeClass('active'); 
            }
        }
    });
});

function slideMenu(go) {            // Slides the menu up/down
    if(go.next('ul').length) {
        go.parent().siblings().find('ul:first').slideUp();
        go.next('ul').slideDown();
    }  
}

nav.find('a').on('click', function () {
 
  var $el = $(this)
    , id = $el.attr('href');
  
  
  $('html, body').animate({
    scrollTop: $(id).offset().top - navHeight
  }, '500');
  
  return false;
});

});

Answer 1

This worked for me

var element = document.querySelector(".nav-sections a.active"); element.scrollIntoView({behavior: "smooth" ,inline: "center"});