Scroll Restoration

reactolith automatically manages scroll position during navigation, just like a traditional multi-page website:

Navigation	Behavior
Link click / Form submit	Scrolls to top
URL with `#hash`	Scrolls to the hash element
Browser Back / Forward	Restores previous scroll position

Scroll positions are stored in sessionStorage, so they survive page refreshes within the same tab.

Preserve Scroll Position

Sometimes you don't want to scroll to the top after navigation (e.g., in-page filters, pagination). Add data-scroll="preserve" to the link or form:

<a href="/products?page=2" data-scroll="preserve">Next Page</a>  <form action="/search" method="GET" data-scroll="preserve"> <input type="text" name="q" /> <button type="submit">Search</button> </form>

Programmatic Navigation

// Default: scrolls to top router.navigate("/page"); // Preserve current scroll position router.navigate("/page", { scroll: "preserve" }); // Replace the current history entry instead of pushing a new one. // Useful for redirects after a successful POST, search-state updates, // or auth flows that swap /login?next=… for /dashboard without leaving // the login route in history. router.navigate("/dashboard", { replace: true }); // Combine replace with scroll: "preserve" for in-page filter updates. router.navigate("/list?q=x", { replace: true, scroll: "preserve" });

Custom Scroll Container

By default, reactolith auto-detects the scroll container by walking up the DOM from the root element and finding the nearest ancestor with overflow-y: auto|scroll. If none is found, window is used.

You can override this with an explicit selector: