Чтобы предотвратить автоматический скроллинг вверх при переходе на ту же страницу с изменением query параметров в Next.js, вы можете использовать несколько подходов, так как сам фреймворк по умолчанию ведет себя так, как вы описали.
1. **Использование `router.replace`**: Попробуйте использовать `router.replace()` вместо `router.push()`. Метод `replace` заменяет текущую запись в истории навигации, и это может помочь избежать прокрутки страницы вверх.
```javascript
router.replace('/?any=any', undefined, { scroll: false });
```
2. **Управление вручную прокруткой**: Если использование `router.replace()` не дает желаемого результата, вы можете попробовать сохранить текущее положение прокрутки и вручную восстановить его после изменения URL. Например:
```javascript
const handleRouteChange = (url) => {
// Сохраняем текущую позицию скролла
const scrollY = window.scrollY;
// Переход на новую страницу
router.push(url, undefined, { scroll: false });
// Восстанавливаем скролл
window.scrollTo(0, scrollY);
}
```
3. **Использование эффекта для прокрутки**: Если предыдущие способы не помогли, можно использовать `useEffect` для установки значения прокрутки после изменения состояния:
```javascript
import { useEffect } from 'react';
import { useRouter } from 'next/router';
const MyComponent = () => {
const router = useRouter();
useEffect(() => {
const scrollY = window.scrollY;
window.scrollTo(0, scrollY); // Либо установите нужное значение
}, [router.query]); // Вызываем при изменении query параметров
const handleClick = () => {
router.push('/?any=any', undefined, { scroll: false });
};
return <button onClick={handleClick}>Изменить параметры</button>;
};
```
4. **Задержка**: Если вы хотите добавить задержку перед выполнением `scrollTo`, вы можете использовать `setTimeout`, но это не всегда является надежным способом:
```javascript
const handleRouteChange = (url) => {
const scrollY = window.scrollY;
router.push(url, undefined, { scroll: false }).then(() => {
setTimeout(() => window.scrollTo(0, scrollY), 100); // Задержка в 100 мс
});
};
```
Помните, что поведение прокрутки может зависеть от вашего конкретного контекста и архитектуры приложения. Убедитесь, что используете актуальные версии библиотек и у вас нет конфликтующих скриптов, которые могут повлиять на поведение прокрутки.