Dot navigation's scroll to section stuck for a second after scrolling

Question

https://www.toriiteppanyaki.com/vertical-fixed-navigation/

this is the page i am testing. whenever i click on the dot navigation to scroll to particular section, it stuck for a second before it can move again. anyone face this before? I am using this code from codyhouse and applying it in my Divi WordPress theme.

< script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" > < /script> <
  script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" > < /script> <
  script >
  jQuery(document).ready(function($) {
    var section_items = $('.sectionnav'),
      navigation_items = $('#navigation a');

    updateNavigation();
    $(window).on('scroll', function() {
      updateNavigation();
    });

    navigation_items.on('click', function(event) {
      event.preventDefault();
      smoothScroll($(this.hash));
    });

    $('.scroll_down').on('click', function(event) {
      event.preventDefault();
      smoothScroll($(this.hash));
    });

    function updateNavigation() {
      section_items.each(function() {
        $this = $(this);
        var activeSection = $('#navigation a[href="#' + $this.attr('id') + '"]').data('number') - 1;
        if ($this.offset().top - $(window).height() / 2 < $(window).scrollTop() && $this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop()) {
          navigation_items.eq(activeSection).addClass('is-selected');
        } else {
          navigation_items.eq(activeSection).removeClass('is-selected');
        }
      });
    }

    function smoothScroll(target) {
      $('body,html').animate({
          'scrollTop': target.offset().top
        },
        600);
    }
  }); <
/script>

<style>ol,
ul {
  list-style: none;
}

</style><style>#navigation {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

#navigation li {
  text-align: right;
}

#navigation a {
  display: inline-block;
}

#navigation a:after {
  content="";
  display: table;
  clear: both;
}

#navigation a span {
  float: right;
  display: inline-block;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}

#navigation a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

#navigation a:hover .label {
  opacity: 1;
}

#navigation a.is-selected .dot {
  background-color: white;
}

#navigation a.is-selected .label {
  opacity: 1;
}

#navigation .dot {
  position: relative;
  /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
  top: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #000000;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

#navigation .label {
  position: relative;
  margin-right: 10px;
  padding: .1em .1em;
  color: white;
  font-size: 14px;
  font-size: 0.875rem;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.nav_trig {
  display: none;
}

</style>