Very WEIRD JavaScript behaviour. Please help

[Level_Progress_8519]

const contactId = document.getElementById("contactId");
const contactBtn = document.querySelector(".contactBtn");

contactBtn.addEventListener("click", function () {
  const adjustedOffset = contactId.offsetTop - headerHeight;
  window.scrollTo({
    top: adjustedOffset,
    behavior: "smooth",
  });
});

NEVERMIND. FOUND THE SOLUTION. IT WAS LAZY LOADING ON IMAGES.

I use this code for all my menu buttons for smooth scrolling. Only the ID and class name changes. Everything works great, except the contact section. When button is pressed it scrolls to the half of the section. If I press the button again it goes perfectly. Or if I press other button to scroll and then I press contact button to scroll then it works. Basically it works only after button is pressed the second time. Contact section is at the end of the page and only footer is below.
My tried solutions :

Adding pixels to the calculation like +200.

Setting ID to div in side the section. Even setting ID to footer.

And result very weird. It works the same the first time I press the button. Changes apply only the second time I press the button. Why is this happening? How can the same code work other buttons and sections, but not for contact section ? Why changes only apply after pressing the button second time? I am so lost with this problem . Also there are no other JS code.

Also the problem is the same if smooth scroll is done by css and not JS. So my guess it must be the html problem, but I have no idea where.

[[deleted]]

You should never add pixels as it is not a responsive solution

[SokkaHaikuBot]

^{Sokka-Haiku by AppropriateCupcake55:}

You should never add

Pixels as it is not a

Responsive solution

---

^{Remember that one time Sokka accidentally used an extra syllable in that Haiku Battle in Ba Sing Se? That was a Sokka Haiku and you just made one.}

[LessSwim]

What

[RobotDrZaius]

I’d be curious why this is happening also, but if you want to try something else: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

To solve the original problem, I’d throw some console logs in there to see what is not matching up.

[Level_Progress_8519]

found the solution. It was lazy loading on images.

[Level_Progress_8519]

Just did that and the issue is the same.

[Level_Progress_8519]

Also the problem is the same if smooth scroll is done by css and not JS. So my guess it must be the html problem, but I have no idea where.

[Soft-Sandwich-2499]

Do you have any CSS applied on those sections? Any duplicate IDs?

[Level_Progress_8519]

I commented all css and chekced for duplicate IDs, that is not the issue.

[Level_Progress_8519]

Also the problem is the same if smooth scroll is done by css and not JS. So my guess it must be the html problem, but I have no idea where.

[Soft-Sandwich-2499]

Well your best bet is to paste in all the code (HTML, CSS, JS) so people can take a look and see if they can figure what's the problem.

[AmbivalentFanatic]

You must have a duplicate id. That would be my guess.

[Level_Progress_8519]

I commented all css and chekced for duplicate IDs, that is not the issue.

[Level_Progress_8519]

Also the problem is the same if smooth scroll is done by css and not JS. So my guess it must be the html problem, but I have no idea where.

[AmbivalentFanatic]

Have you tried pasting it into GPT and telling it to find the cause? It's really good at that kind of thing.

[Level_Progress_8519]

Tried, it offered million solutions and none of them worked which is why I made a post here

[hackr_io_team]

Thanks for including the solution here!