scroll to top of page - livewire component - alpine js

Question

I have an app created with laravel livewire where I'm loading a livewire component with multiple nested components that display one at a time depending upon a status variable. When each nested component is displayed the page is scrolled to the bottom. I'd like the default scroll be to the top. At the top of a nested component I've tried:

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

I've also tried scrolling the page to the top using a click event prior to hiding component 1 and displaying component 2. This would be to ensure the page is scrolled to the top prior to displaying component 2.

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

Neither approach is working. Thanks in advance.

Answer 1

I realized it wasn't the window that I needed to scroll it was a <div> within the window. Hence, using solution 2, I scroll to the top of the div after the action of clicking a button to display the next component (and hide the current). When the next component displays the containing div is scrolled to the top.

I'd still rather not need to implement this workaround but not sure how else to prevent the div from being scrolled to the bottom when the next component is shown.