Pagination jump to top

#1

I have my pagination links at the bottom of a set of products, it doesn’t look natural/logic to put them at the top.

When a customer clicks on a page number in the pagination links, I’d like to let the page jump to the top. I can’t think about how I would go about doing this, has anyone implemented such UX?

#2

Hey, @joost

try to add @click="scrollTo({top: 0, behavior: 'smooth'})"

For example:

<nav ....>
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
   <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="..."                
                @click="scrollTo({top: 0, behavior: 'smooth'})">
       {!! __('pagination.next') !!}
   </a>
@else
   <span class="..." @click="scrollTo({top: 0, behavior: 'smooth'})">
       {!! __('pagination.next') !!}
   </span>
@endif
</nav>
#3

There is a simple trick to prevent this behavior:

In your pagination links simply add a forward slash (/) and it will stop jumping top top of the page.

<a href="#/" class="pagination-class">{{ $pageNumber }}</a>
#4

Thanks @skywalker, your answer was the push in the right direction. Two things were different for the solution though: 1) I needed to publish the Livewire pagination component, not the default Laravel one that you mentioned and 2) @click doesn’t work on this Livewire component.

What I did was this:

Publish the Livewire pagination component: php artisan livewire:publish --pagination

Then in resources/views/vendor/livewire you’ll find the pagination components. I’m using the Bootstrap one.

In this component you’ll find <button> elements with a wire:click on them. That’s probably why using AlpineJS’s @click won’t work here.

I had to fallback to ‘he who shall not be named’ here, please don’t judjge :smiley:.

On each button element in the pagination component I added a class called page-link-scroll-to-top and in my JS I have:

$(document).on('click', '.page-link-scroll-to-top', function (e) {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Hope this helps others that want to achieve the same thing. If using both @click and wire:click on the button can be done then I’m open to suggestions.

1 Like
#5

I actually do want this behaviour, not prevent it :wink:

#6

Oh my bad sorry I completely misread it

1 Like
#7

Hey, @joost

Good to know that you are solved your problem.

I didn’t know that you are using jQuery :grin:

In all cases happy coding

1 Like
#8

Caleb covers this in one of his Datatables videos and I’m sure it’s “slicker” than this, but I can’t find it. Anybody know?