Why do anchors not work properly in a vertical menu using js scrolling?

Question

JavaScript

I use a script for smooth scrolling from anchors with an indent from above

$(document).ready(function() {
  $(".Anchor").on("click", "a", function(event) {
    event.preventDefault();
    var id = $(this).attr('href'),
      top = $(id).offset().top;
    $('div').animate({
      scrollTop: top - 200
    }, 500);
  });
});

On making a vertical menu with a scroll on the right (scrollspy from bootstrap 4), the menu began to behave extremely inadequately, jumping, scrolling further and not going there
Better to see once than hear a hundred times, link to the video
What's the matter, how to fix it?
Actually, this is how the menu behaves without a script, which also does not suit me very much

Answer 1

Syntax highlighting looks like something went wrong