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

【问题标题】：How to do window.scrollTo(0,0) in Svelte如何在 Svelte 中执行 window.scrollTo(0,0)
【发布时间】：2019-10-10 10:33:14
【问题描述】：

我正在使用 svelte 和 svelte-routing 创建一个网站，并在用户四处导航时尝试滚动到页面顶部。在其他框架中，例如 React window.scrollTo(0, 0) 工作得非常好。在 Svelte 中，不幸的是，以下代码什么都不做：

import { onMount } from "svelte";

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

那么实现这个功能的诀窍是什么？

【问题讨论】：

请看thisREPL，一切都按预期工作，不是吗？
是的，它工作正常。所以我的代码中一定有某种错误。我真的什么都想不出来。

标签： javascript svelte

【解决方案1】：

您还可以使用 svelte 窗口绑定 (API doc) 绑定到 scrollX 和 scrollY 等窗口属性：

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

现在您可以阅读设置 y 属性。见this Svelte docs REPL。

【讨论】：

不，我已经尝试过了，并且 y 始终未定义。可能我使用的路由包有问题（svelte-routing）。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

npm i svelte-scrollto

然后在你的苗条文件中

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

【讨论】：