와 너무 감사합니다..이렇게 하면 되는거였군요...
혹시 그럼 메뉴를 클릭했을 경우가 아니라 그냥 스크롤을 내렸을때 해당 섹션의 메뉴에 class on을 추가하려면 어떻게 해야 할까요..?ㅠㅠ

현재 올려주신 코드를 참고하여 작성하였습니다.

$(".nav li").click(function() {
  $("li").removeClass("on");
  $(this).addClass("on");

  var idx = $(this).index();
  idx1 = $(".sctCnt").eq(idx);
 
  $('html,body').animate({
    scrollTop: $(idx1).offset().top},'slow'); 
});

<style>
.acfIntNav {
  background-color: f5f5f5;
  position: fixed;
  right: 0;
}
.acfIntNav ul {
  list-style-type: none;
  width: 10em;
  padding: 0;
  margin: 0;
}
.acfIntNav ul li.sctNav {
  text-align: right;
}
.acfIntNav ul li.sctNav a {
  text-decoration: none;
  color: #aaa;
  display: inline-block;
  font-weight: bold;
  padding: 0 0.4em 0 1em;
  margin: 0.2em 0;
  border-radius: 1em;
}
.acfIntNav ul li.sctNav a::after {
  content: 'ㆍ';
  font-size: 1.5em;
  vertical-align: middle;
}
.acfIntNav ul li.sctNav.on a {
  background-color: #333;
  color: #eee;
}
.sctCnt {
  height: 100em;
}
</style>
<div class="acfIntNav">
    <ul class="nav">
        <li class="sctNav on"><a href="javascript:;">메뉴1</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴2</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴3</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴4</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴5</a></li>
    </ul>
</div>
<div class="sctCnt">1</div>
<div class="sctCnt">2</div>
<div class="sctCnt">3</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
/*for (let i = 0; i < $('.sctNav').length; i++) {
  $('.sctNav').eq(i).click(function(){ // i번째 탭버튼 클릭 시
      $('li').removeClass("on");
      $(this).addClass("on");
 
      if ($('.sctCnt').eq(i).get(0) != null) {
        let top = $('.sctCnt').eq(i).offset().top;
        // $(document).scrollTop(top);
        $('body').animate({scrollTop: top});
      }
  });
}*/
var scrolling = true;

$(".nav li").click(function() {
  $("li").removeClass("on");
  $(this).addClass("on");

  var idx = $(this).index();
  idx1 = $(".sctCnt").eq(idx);
 
  if (idx1.get(0) != null) {
    scrolling = false;
    $('html,body').animate(
      {scrollTop: $(idx1).offset().top},
      'slow',
      function () { scrolling = true; }
    ); 
  }
});

$(document).on('scroll', function (evt) {
  if (scrolling == false) {
    return;
  }

  var scrolltop = $(document).scrollTop();
  var scrollidx = -1;
  $('.sctCnt').each(function (i, el) {
    if ($(el).offset().top <= scrolltop) {
      if ($(".nav li").eq(i).get(0) != null) {
        scrollidx = i;
      }
    }
  });

  if (scrollidx > -1 && $(".nav li").eq(scrollidx).get(0) != null) {
    $(".nav li").removeClass("on");
    $(".nav li").eq(scrollidx).addClass("on");
  }
});
</script>