Сохранение прокрутки в Inertia

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

Опция визита preserveScroll отключает автоматический сброс прокрутки для одного запроса. У Link в шаблоне Vue для этого есть атрибут preserve-scroll: клик по такой ссылке сохраняет текущую высоту окна. Тот же смысл у опции в вызовах router, если переход запускают из скрипта.

Давайте опишем список с параметром тега:

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

	Route::get('/posts', function (Request $request) {
		return Inertia::render('Posts/Index', [
			'tag' => $request->query('tag', 'all'),
		]);
	});
?>

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

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

	defineProps({
		tag: String,
	})
</script>

<template>
	<h1>Posts</h1>
	<p v-for="n in 30" :key="n">
		Row {{ n }}
	</p>
	<nav>
		<Link href="/posts?tag=news" preserve-scroll>
			News
		</Link>
		<Link href="/posts?tag=ideas" preserve-scroll>
			Ideas
		</Link>
	</nav>
	<p>Filter: {{ tag }}</p>
</template>

На длинном списке работников сделайте переключение между отделами Legal и Design так, чтобы высота прокрутки не сбрасывалась.