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: