Prevent primary links from changing scroll position

[jdwillemse]

Summary

I'm trying to manually control the scroll position in order to facilitate page transitions.

Relevant information

I'm using Framer motion to transition pages as per this example.

I prevent scroll in the gatsby-browser file, but some of my links still jump the page to the top.

export const shouldUpdateScroll = () => {
  return false
}

I found a reference to this being due to the underlying router lib being used. @reach/router updates scroll position on primary links. I do not know how to override this behavior. Does anyone know how to prevent all Gatsby links from affecting the scroll position?

[blainekasten]

Hey @jdwillemse !

Yeah, I think there is probably a current limitation here. I'm suspecting this is coming from reach focusing on the accessibility wrapper component (which then scrolls to the focused element).

Are you creating like a single page site where links scroll to different sections? or what's the use case?

[jdwillemse]

I'm trying to create page transitions but the page jumps to the top before the exit animation is done.

Do you have any suggestions for a workaround? I currently dropped the exit animation and only have an enter one but this is not really satisfactory.

[shawngrona]

+1 is there any way to pass arguments to the reach router from gatsby? i also need to leverage that primary={false} property that the reach folks are mentioning

this is an issue even if you're not animating

[blainekasten]

@shawngrona why is this an issue if not animating?

We're crossing a fine line here. Gatsby has a core tenant of being accessible by default. Accessibility does add constraints to functionality and design. Preventing the focus will degrade accessibility.

@jdwillemse Page transitions are hard to do almost always. I really don't know how to reconcile this. I suspect that we might need to wait for Suspense to support this properly.

A hack you might want to consider is creating your own internal Link components that basically do some sort of setTimeout before navigating.

[jdwillemse]

@blainekasten Being able to pass props to an internal dep has nothing to do with accessibility. It has everything to do with fine-grained creative control.

Accessibility is obviously very important but jumping to the top of the page with a delay should not impact this.

[el-j]

Hi, i struggle with the exact same problem. Before the page is changed it scrolls to top. This is a problem that breaks the release of a page for me. I tried with different work around but could not change the behavior. passing achorsnames via params to the child and return to the index with archor in url was my "normal" html approach, but this does not work like other things i tried.

Is there any hint how to fix the jump to top? Thx very much for any idea... (And go back to this position on return, as this is what I need what I think works but breaks from scroll top before navigate)