Advice on fixing some tricky centering/scrolling behavior

Hello all!

I’m working on resolving some tricky scrolling behavior for this site: Read only link here.

Context and my goals:

  1. The site is a single page with a series of sections that are each the full view height and width, with some copy centered in each.
  2. The desired behavior is to enforce scrolling such that the copy is always centered in the view. I’m doing this with scrollify.
  3. The other desired behavior is that whenever a user clicks or taps the copy they are automatically scrolled to the next section, again with the content centered. I implemented this with section IDs and links.
  4. Ideally each section would also be IDed such that we get corresponding Current Item nav link highlights.

Description of issue:

  1. The original section IDs/links didn’t work because they wouldn’t return to the section evenly centered on screen. I fixed this by creating special zero height sections specifically for positioning and linked to those.
  2. Scrollify, once implemented, creates its own IDs for each section.
  3. At some point everything seemed to be working, until after a few updates I noticed that no combination of solutions would result in the scrolling/linking behavior being persistently centered as desired.
  4. Even weirder, the scrolling and centering behavior differs depending on whether the page is view in incognito or not - even after a full cache refresh! This implies to me something weird happening under the hood with a cached behavior that I don’t understand.

Thoughts on the above? I sense there is something foundational in my approach that I need revisit. Thanks!