I want to prevent the sequential class creation of buttons when clicking and scrolling at the same time

Question

In one-page structure, I want to control the class of the button during scroll animation by the button, and control the class of the button when scrolling the window.

In the current code, when the button is clicked, the button is sequentially controlled and the class is controlled. I want to control only the class of the corresponding page.

According to the class control of the scroll, when button 4 is clicked, the class is controlled sequentially 1, 2, 3, and then moves to 4, but I want to control the class only on the corresponding button.

let $gnb_btn = $('.gnb ul li a');  // btn
let $cont = $('.main_cont .cont');  // page

$gnb_btn.eq(0).addClass('active');

$gnb_btn.each(function(index) {
  $(this).click(function() {
    let $this = $(this);
    $('html, body').stop().animate({
      scrollTop : $cont.eq(index).offset().top
    },400,'swing',function() {
      $gnb_btn.removeClass('active');
      $this.addClass('active');
    });
  });

  $(window).on('scroll', function() {
    let yPos = $(this).scrollTop();
    if ( yPos >= $cont.eq(index).offset().top) {
      $gnb_btn.removeClass('active');
      $gnb_btn.eq(index).addClass('active');
    }
  });
});