Pagination Auto-Scroll To Top

2024-04-28

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: