滚动到页面顶部 - livewire 组件 - alpine js

Question

我有一个用 laravel livewire 创建的应用程序，我正在加载一个带有多个嵌套组件的 livewire 组件，这些组件根据状态变量一次显示一个。当显示每个嵌套组件时，页面会滚动到底部。我希望默认滚动到顶部。在我尝试过的嵌套组件的顶部：

x-data x-init="window.scrollTo(0, 0)"

我还尝试在隐藏组件 1 和显示组件 2 之前使用单击事件将页面滚动到顶部。这将确保在显示组件 2 之前将页面滚动到顶部。

x-data x-on:click.document="window.scrollTo(0, 0)"

这两种方法都不起作用。提前致谢。

Answer 1

我意识到我需要滚动的不是窗口，而是<div>窗口内的窗口。因此，使用解决方案 2，在单击按钮以显示下一个组件（并隐藏当前组件）的操作后，我滚动到 div 的顶部。当下一个组件显示时，包含的 div 会滚动到顶部。

我仍然不想实现此解决方法，但不知道如何在显示下一个组件时防止 div 滚动到底部。