ScrollTo - anchor link correct position

[Matteo-pd]

Problem:

I have a menu with anchor links to the sections (#item-1, #item-2, ...). When the targeted section is not visible yet, then the offset top position of the section is wrong.

How can I read the correct section position after clicking on the anchor link?

Code:

https://codepen.io/matteokrr/pen/VwqKxbL

$(document).on('click', 'a[href^="#"]', function (e) {
  e.preventDefault();
  var target = $(this.hash);

  if (target.length) {
    let headerHeight = $('.header').outerHeight();
    $('html, body').stop().animate({
        scrollTop: target.offset().top - headerHeight - 20
    }, 2000, 'swing');
  }
});

I'm using AOS animation:

[data-aos='zoom-in-down'] {
  transform: translate3d(0, -200px, 0) scale(.6);
}

[Matteo-pd]

Any idea?

[ericdsd]

Hi have the same issue with fade-up animation on an element that is just before my anchor alement and it break the scrolled position. The scroll is using only native css, no js for the scroll itself.

[markmorris]

AOS.refresh();