[Bug?]: Add option to disable scrolling to the top for a Link component

[jakubfiglak]

What's not working?

Navigating through the app with the Link component always scrolls the page to the top even if the only thing that's changed is the query parameters. This is not always desired, for example when you use query parameters to store the filters state on the page. It would be great if there was an option to pass scroll: false or something similar to the Link component and navigate calls (this is how it's done in Next.js - https://nextjs.org/docs/pages/api-reference/components/link#scroll-1)

This is related to #9004 where there's a comment that a decision has been made to reset a scroll position on query string params change but there should be an option to opt out from this behavior in my opinion.

How do we reproduce the bug?

Repo: https://github.com/jakubfiglak/redwood-scroll-repro
Live: https://redwood-scroll-repro.vercel.app/
Screen recording:

Screen.Recording.2023-08-22.at.12.10.40.mov

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

[xmonkee]

I would also like this option. I have some tabs on some pages, and they use URL hashes for navigating between them, and this causes a very jarring effect.

@jakubfiglak I am currently doing the following to "fix" this: Remember the scroll position and scroll back to it on navigation. It's causes a barely visible flash sometimes.

On the parent component:

const scrollY = useRef(0)

useEffect(() => {
    setTimeout(() => {
      window.scrollTo(0, scrollY.current)
    }, 0)
}, [queryParams])

And replace Link with button with the following

onClick={() => {
    props.scrollY.current = window.scrollY
    navigate(href)
 }}

[jakubfiglak]

I would also like this option. I have some tabs on some pages, and they use URL hashes for navigating between them, and this causes a very jarring effect.

@jakubfiglak I am currently doing the following to "fix" this: Remember the scroll position and scroll back to it on navigation. It's causes a barely visible flash sometimes.

On the parent component:

const scrollY = useRef(0)

useEffect(() => {
    setTimeout(() => {
      window.scrollTo(0, scrollY.current)
    }, 0)
}, [queryParams])

And replace Link with button with the following

onClick={() => {
    props.scrollY.current = window.scrollY
    navigate(href)
 }}

Hey @xmonkee if you're having this issue with hash parameters as well, probably the only thing you have to do is to update Redwood to the latest version. This behavior's been changed for hashes with #9004. I've updated my reproduction project with the example using hash parameters so you can see it's working properly now.

Thanks for the suggested workaround but it feels very hacky to me. I'm gonna continue to look for something else, no offence! I even already have something that restores the scroll position to the desired value but then the scroll bounces back and forth and it's really annoyinh.

[jtoar]

Hey @jakubfiglak, sorry for the late response here. What you're proposing sounds sensible—are you still interested in opening a PR? I'd be happy to review.

[jakubfiglak]

Hey @jakubfiglak, sorry for the late response here. What you're proposing sounds sensible—are you still interested in opening a PR? I'd be happy to review.

Hey @jtoar no worries! Yup, I'm still interested, will try and push something up this week.

[jtoar]

@jakubfiglak awesome!