Search code examples
reactjsreact-spring

Fix height offset when transferring from one page to another

I have prepared this demo which transitions from one page to another using react-spring and there is this height offset. When you scroll down on page 1 and click on an item, page 2 loads too high. How is this problem called in webdev? I can't find any posts about it.

Solution

  • You can scroll to the top at every page change. All you must do is calling this:

    window.scrollTo(0, 0);

    UPDATE:

    You either call it somehow between page transitions, when one page is already disappeared and the other is not rendered yet.

    Or you can call it at the end with smooth scrolling for example with react spring. Something like this, I do not tried it yet. (it is from react-spring example)

    const props = useSpring({ scroll: 0, from: { scroll: actualPosition } })
return <animated.div scrollTop={props.scroll} />