如何在 Svelte 中执行 window.scrollTo(0,0)

Question

我正在使用 svelte 和 svelte-routing 创建一个网站，并在用户浏览时尝试滚动到页面顶部。在 React window.scrollTo(0, 0) 等其他框架中工作得很好。不幸的是，在 Svelte 中，以下代码什么也没做：

import { onMount } from "svelte";

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

那么使这项工作成功的诀窍是什么？

Answer 1

您还可以使用 svelte window bind (API doc):

绑定到 window 属性，例如 scrollX 和 scrollY

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

现在您可以阅读 en set the y 属性。参见 this Svelte docs REPL。

Answer 2

好的，这个错误不是一个小问题。问题出在 html 样式上。似乎 html 的溢出要设置为自动工作，而不是！在 body 上。任何 body 也遇到此错误的人可以查看此 thread。

Answer 3

从 npm 安装 Svelte-scrollto 包。它有助于滚动动画。

npm i svelte-scrollto

然后在您的 svelte 文件中

<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>

如何在 Svelte 中执行 window.scrollTo(0,0)

How to do window.scrollTo(0,0) in Svelte

javascript

svelte