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.

Justin · Accepted Answer · 2021-02-10 20:25:55Z

3

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.

edited Feb 10, 2021 at 20:25

answered Feb 10, 2021 at 19:41

Justin

2877 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

scroll to top of page - livewire component - alpine js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related