Filament: Pagination Auto-Scroll To Top

Free Snippet

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.

No More Manual Scrolling

How it works

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: