Back to School: coupon SCHOOL25 for 40% off Yearly/Lifetime membership! Read more here

Pagination Auto-Scroll To Top

2024-04-28 Filament v3

By default, Filament pagination leaves the page on the same scrolling position after clicking to another page. So users need to scroll up manually. This snippet will prevent that scroll.

app/Filament/Resources/TaskResource/Pages/ListTasks.php:

class ListTasks extends ListRecords
{
// ...
 
public function setPage($page, $pageName = 'page'): void
{
parent::setPage($page, $pageName);
 
$this->dispatch('scroll-to-top');
}
}

app/Providers/AppServiceProvider.php:

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\HtmlString;
 
// ...
 
class AppServiceProvider extends ServiceProvider
{
// ...
 
public function boot(): void
{
FilamentView::registerRenderHook(
PanelsRenderHook::SCRIPTS_AFTER,
fn (): string => new HtmlString('
<script>document.addEventListener("scroll-to-top", () => window.scrollTo(0, 0))</script>
'),
);
}
}

You can read more about Render Hooks in the official Filament documentation.

A few of our Premium Examples: