Директива wire:navigate.preserve-scroll

Директива wire:navigate.preserve-scroll является модификатором директивы wire:navigate. Она используется для сохранения текущей позиции прокрутки страницы при переходе по ссылке. По умолчанию при навигации через wire:navigate страница прокручивается вверх. Модификатор .preserve-scroll отменяет это поведение.

Синтаксис

<a href="/page" wire:navigate.preserve-scroll>
	Link
</a>

Пример

Давайте создадим компонент с длинным списком и ссылкой на другую страницу. При клике на ссылку позиция прокрутки сохранится:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class ListComponent extends Component
	{
		public $items = [];
		
		public function mount()
		{
			$this->items = range(1, 100);
		}
		
		public function render()
		{
			return view('livewire.list-component');
		}
	}
?>

<div>
	<a href="/another-page" wire:navigate.preserve-scroll>
		Go to another page
	</a>
	<ul>
		@foreach ($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

Результат выполнения кода:

<div>
	<a href="/another-page">
		Go to another page
	</a>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		...
		<li>100</li>
	</ul>
</div>

Пример

Сравним поведение с обычной навигацией и с сохранением прокрутки. В первом случае страница прокрутится вверх, во втором - останется на месте:

<div>
	<a href="/page1" wire:navigate>
		Navigate without scroll preservation
	</a>
	<br>
	<a href="/page2" wire:navigate.preserve-scroll>
		Navigate with scroll preservation
	</a>
</div>

Результат выполнения кода:

<div>
	<a href="/page1">
		Navigate without scroll preservation
	</a>
	<br>
	<a href="/page2">
		Navigate with scroll preservation
	</a>
</div>

Смотрите также

директиву wire:navigate,
которая обеспечивает SPA-навигацию без перезагрузки страницы
директиву wire:navigate.hover,
которая предзагружает страницу при наведении мыши
директиву wire:click,
которая обрабатывает клик по элементу
директиву wire:loading,
которая показывает индикатор загрузки во время навигации