Сброс прокрутки в Inertia

Давайте теперь откроем длинный список постов, долистаем до середины и перейдём на другую страницу по ссылке. После смены экрана хочется снова начать чтение сверху, как при обычной загрузке сайта, а не остаться на той же высоте, где закончился предыдущий список.

Inertia при визите сам сбрасывает прокрутку body документа к началу. Отдельную опцию для этого включать не нужно: достаточно обычного перехода через Link или router. Клиент также запоминает положение прокрутки для каждого адреса и подставляет его при ходе по истории браузера назад и вперёд.

Давайте опишем длинный список и страницу статьи:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index');
	});

	Route::get('/posts/welcome', function () {
		return Inertia::render('Posts/Welcome');
	});
?>

Давайте нарисуем длинную ленту и ссылку на другой экран:

<script setup>
	import { Link } from '@inertiajs/vue3'
</script>

<template>
	<h1>Posts</h1>
	<p v-for="n in 40" :key="n">
		Row {{ n }}
	</p>
	<Link href="/posts/welcome">
		Open welcome
	</Link>
</template>

Давайте добавим короткий экран, на который ведёт ссылка:

<template>
	<h1>Welcome</h1>
	<p>Start reading here.</p>
</template>

Сделайте длинный список работников отдела Sales и переход на карточку руководителя так, чтобы новый экран открывался с верхней строки.