How to implement scrolling with pagination

[ineptian]

How would I implement this using antlers/statamic since we just use {{ links }}? https://livewire.laravel.com/docs/pagination#customizing-scroll-behavior

Right now when clicking the next or previous buttons the window scroll stays at the bottom of my page so the new posts are loaded in above where the user can view them. Would like to reset to the top of the container when my pagination is clicked.

Also wondering if that is the intended functionality or maybe I have something setup wrong.

Thanks!

[robdekort]

I believe this has only recently got introduced in Livewire v3 and I suspect you currently can't do this in Antlers.

What you can do however is this:

public function updatingPaginators()
{
    $this->dispatch('scroll-top');
}

You can then add something like this to the root of your Livewire component:

<section x-data @scroll-top.window="($root.getBoundingClientRect().top < 0) && $root.scrollIntoView()">

You can omit ($root.getBoundingClientRect().top < 0) && if your Livewire component is always at the top of the page. This bit makes sure to only scroll up when you've scrolled past the start of your component.

Add classes like scroll-smooth scroll-pt-24 to your HTML for smooth scrolling and compensating any sticky header you may have.

[ineptian]

Thanks Rob!