Jump to content
GreenSock

JoeH

React, Scroll Smoother, navigating between pages/routes and the scroll position persisting

Recommended Posts

Hi,

 

The issue is when navigating between pages/routes in React, if you for instance click an internal link, then when you arrive on the next page, the scroll position that you were in when you click the link has persisted.

 

On the current site I am working on I am not too fussed if the page always loads at the top no matter what, so I have just added:

 

useEffect(() => {
    smoother.scrollTop(0)
  }, []);

On every page component.

 

However if this is not desirable I was wondering what the proper or best way of dealing with this issue might be.

 

 

 

Link to comment
Share on other sites

Hi Joe,

 

Are you using Next.js? If so, to keep the scroll position you can use <Link scroll={false}></Link>.

 

Link to comment
Share on other sites

Blake, I I understood @JoeH correctly, I think he actually WANTS the scroll to reset (go back to the top) on each route. So yeah, you could smoother.scrollTop(0) if you want, or if you're asking how to tell ScrollTrigger to forget any recorded scroll position, you can use ScrollTrigger.clearScrollMemory()

  • Like 1
Link to comment
Share on other sites

7 hours ago, OSUblake said:

Hi Joe,

 

Are you using Next.js? If so, to keep the scroll position you can use <Link scroll={false}></Link>.

 

I am not using Next.js. Although I guess your method could be used still by creating a custom component for links which uses the Link component, and looks for the scroll value.

Link to comment
Share on other sites

5 hours ago, GreenSock said:

Blake, I I understood @JoeH correctly, I think he actually WANTS the scroll to reset (go back to the top) on each route. So yeah, you could smoother.scrollTop(0) if you want, or if you're asking how to tell ScrollTrigger to forget any recorded scroll position, you can use ScrollTrigger.clearScrollMemory()

 

Yes I do wish for this. I think where it may not be desirable for some websites is on a refresh of a page where it is normal for the scroll position to persist.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×