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

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>