How to go back to top using pagination

#1

What seems to be the problem:
i subscribed to livewire screencast to learn more but i am stuck at the https://laravel-livewire.com/screencasts/s7-pagination
when clicking next, the scrollbar stays always at the bottom
and its really bad for an user to scroll to the top every time to see the results

Steps to Reproduce:
Auto scroll to top after clicking next

Are you using the latest version of Livewire:
Yes

Do you have any screenshots or code examples:
ezgif.com-gif-maker

#2

Hey, @kgnfth

Take a look here

Or here

#3

Hi, thank you for helping
but i have no idea how to use it

do i have to add wire:click="$refresh" to the next click button ?
if so there is already wire:click=“nextPage” in my pagination links

#4

Hey, @kgnfth

No need to add $refresh in any of your buttons, and yes. already wire:click="nextPage" exists in your code.

Please take a look here:

#5

@skywalker i did it like this

i extended WithPagination traid

    public function gotoPage($page)
    {
        $this->setPage($page);
        $this->emit('gotoTop');
    }

    public function nextPage()
    {
        $this->setPage($this->page + 1);
        $this->emit('gotoTop');
    }

    public function previousPage()
    {
        $this->setPage(max($this->page - 1, 1));
        $this->emit('gotoTop');
    }

and added

<script>
        Livewire.on('gotoTop', () => {
            window.scrollTo({
                top: 15,
                left: 15,
                behaviour: 'smooth'
            })
        })
</script>

to my blade and it worked
i did not understand the $refresh from How to go top of page after calling '$refresh'

#6

You can do it in multiple ways.

Glade to this works for you.

Happy coding mate!

1 Like