Блог

Главная - Вопросы по программированию - Как перейти на другую страницу, не сохраняя положение прокрутки с помощью React

Как перейти на другую страницу, не сохраняя положение прокрутки с помощью React

#reactjs #scroll #routes #next.js #single-page-application

Вопрос:

Я работаю над проектом с Next/React. Когда я нажимаю на кнопку, которая должна перенести меня на другую страницу, положение прокрутки сохраняется, что означает, что я попадаю на новую страницу на X пикселей ниже.

Я добавил на страницу следующий код:

 if (window.pageYOffset > 0) {
  window.scrollTo(0, 0);
}

Это работает. Но дело в том, что перед тем, как это сработает, страница отображается на X пикселей вниз примерно за 1 секунду или меньше, прежде чем перейти к началу.

Ответ №1:

Добавьте прокрутку в верхний код в useEffect крючке или componentDidMount в компоненте страницы. Вам нужно будет добавить это в компоненты каждой страницы. Я бы рекомендовал переместить его в пользовательский крюк и вызвать его.

Для вашего useEffect сделайте это:

 useEffect(() => window.scrollTo(0, 0), []);

Это гарантирует, что как только компонент будет смонтирован, он прокрутится вверх. Пустой [] массив зависимостей гарантирует, что он будет выполнен только один раз, когда компонент смонтирован.

Комментарии:

1. Спасибо! К сожалению, именно это я и сделал, и сначала он переходит на предыдущую позицию страницы, а затем поднимается наверх.

Ответ №2:

Есть два способа, которые вы можете попробовать:

Первый

ReactDOM.findDOMNode(this).scrollLeft = 0; вы можете добавить этот код внутри componentDidUpdate, если это компонент класса, или внутри useEffect, если это компонент функции

Второй

 history.listen((location, action) => {
    window.scrollTo(0, 0)
})
Метки: ,