I am using svelte and svelte-routing to create a website and try to scroll to the top of the page whenever a User navigates around. In other Frameworks like React window.scrollTo(0, 0) works perfectly fine. In Svelte, the following code does nothing unfortunately:

import { onMount } from "svelte";

onMount(() => window.scrollTo(0,0));

So what is the trick to make this work?

I am using svelte and svelte-routing to create a website and try to scroll to the top of the page whenever a User navigates around. In other Frameworks like React window.scrollTo(0, 0) works perfectly fine. In Svelte, the following code does nothing unfortunately:

import { onMount } from "svelte";

onMount(() => window.scrollTo(0,0));

So what is the trick to make this work?

• javascript
• svelte

Share Improve this question Follow asked Oct 10, 2019 at 10:33 Gh05dGh05d 9,0221111 gold badges4040 silver badges8282 bronze badges 2

• 5 Please see this REPL, everything is working as expected, no? – Shaya Ulman Commented Oct 10, 2019 at 17:43
• Yes, it works fine. So I must have some kind of bug in my code. I can't really think of anything. – Gh05d Commented Oct 11, 2019 at 8:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can also bind to window properties like scrollX and scrollY using svelte window bind (API doc):

<svelte:window bind:scrollY={y}/>

Now you can read en set the y property. See this Svelte docs REPL.

Okay, the bug was not a svelte problem. The issue was with the html styles. Seems like the overflow of the html was to be set on auto to work and not! on the body. Anybody also experiencing this bug can check out this thread.

Install the Svelte-scrollto package from npm. It helps with scrolling with animation.

npm i svelte-scrollto

then in your svelte file

<script>
 import * as animateScroll from "svelte-scrollto";
</script> 

<a on:click={() => animateScroll.scrollToBottom()}> Scroll to bottom </a>
<a on:click={() => animateScroll.scrollToTop()}> Scroll to top </a>