Быстрый скролл вниз и вверх при загрузке страницы может происходить из-за неопределенной высоты контента на странице. Когда страница загружается, браузер начинает рассчитывать высоту контента, и если у каких-то элементов не задана явно высота (например, блоки с текстом или изображениями), то браузер ставит им автоматическую высоту в зависимости от их содержимого. Это может привести к тому, что контент меняет свою высоту после загрузки, что в свою очередь вызывает быстрый скролл вниз и вверх.
Чтобы избежать этого эффекта, можно явно задать минимальную высоту элементам на странице или использовать псевдоэлементы для создания заполнителя с нужной высотой.
Демонстрация данного эффекта может выглядеть примерно так:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Issue</title>
<style>
.content {
background-color: #f0f0f0;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis lorem ut nunc vehicula, id ullamcorper dolor lobortis. Donec sodales nisl a scelerisque elementum. Sed sit amet dui dictum, ultricies tortor id, malesuada sapien.</p>
<img src="https://via.placeholder.com/150">
</div>
</body>
</html>
```
В данном примере мы имеем блок с текстом и изображением, у которых не задана минимальная высота. При загрузке страницы браузер сначала покажет элементы с их текущей высотой, а затем изменит высоту после расчетов, что приведет к быстрому скроллу вниз и вверх.
Надеюсь, это помогло вам понять, почему происходит быстрый скролл вниз и вверх при загрузке страницы.