javascript - scroll to top of page - livewire component - alpine js - Stack Overflow

admin管理员组

文章数量:1405407

I have an app created with laravel livewire where I'm loading a livewire ponent with multiple nested ponents that display one at a time depending upon a status variable. When each nested ponent 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 ponent 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 ponent 1 and displaying ponent 2. This would be to ensure the page is scrolled to the top prior to displaying ponent 2.

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

Neither approach is working. Thanks in advance.

I have an app created with laravel livewire where I'm loading a livewire ponent with multiple nested ponents that display one at a time depending upon a status variable. When each nested ponent 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 ponent 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 ponent 1 and displaying ponent 2. This would be to ensure the page is scrolled to the top prior to displaying ponent 2.

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

Neither approach is working. Thanks in advance.

• javascript
• laravel-livewire
• alpine.js

Share Improve this question Follow asked Feb 10, 2021 at 5:26 JustinJustin 28777 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 ponent (and hide the current). When the next ponent 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 ponent is shown.

本文标签： javascriptscroll to top of pagelivewire componentalpine jsStack Overflow