scrollsveltesapper

How to stop Sapper from scrolling back to top in nested routes?


The thing is that I have two routes /istifta and /istifta/edit

The /istifta route displays istiftas (questions) while /istifta/edit route opens up a panel for editing questions on the same page due to same _layout.svelte file.

The only problem is that when I access /istifta/edit from /istifta. It not only opens up the editing panel but also scrolls to the top of page. How can I stop this behavior? I want to remain on the same scroll position upon this navigation. The istiftas is a long list. For editing it should remain on the same scroll position. Scrolling to bottom again and again and finding ids is overly complicated for the user.

Please solve this. Specially, Rich Harris, if you are reading this.


Solution

  • We really should get round to documenting this, but if you add a sapper-noscroll attribute to an <a> tag, it will prevent that behaviour:

    <!-- in src/routes/istifta/index.svelte -->
    <a href="istifta/edit" sapper-noscroll>edit</a>