При переходе на другую страницу не происходит прокрутка наверх

Рейтинг: 0Ответов: 2Опубликовано: 22.06.2023

При переходе на новую страницу скролл остается на своем месте, не меняя своего положения

import React from "react";
import { BrowserRouter, useLocation } from "react-router-dom";
import AppRouter from "./components/AppRouter";

function ScrollToTop() {
  const { pathname } = useLocation();

  React.useEffect(() => {
    window.scrollBy(0, 0);
  }, [pathname]);

  return null
}

function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <AppRouter />
    </BrowserRouter>
  );
}

export default App;

В чем может быть причина и как это исправить?

javascript reactjs прокрутка react-router-dom
Источник: Stack Overflow на русском

Ответы

▲ 0

Для того, что бы при рендере новой страницы скролл устанавливался в начало страницы, необходимо вызвать метод window.scrollTo(0, 0)

Метод window.scrollBy(0, 0) двигает скролл относительно текущего положения.

Демонстрация:

document.querySelectorAll('.down').forEach(e => {
  e.addEventListener('click', () => {
    window.scrollBy(0, 100);
    console.log('Вниз на 100px');
  });
})
document.querySelector('.up').addEventListener('click', () => {
  window.scrollTo(0, 0);
  console.log('В самый верх');
});
.divclass {
  width: 200px;
  height: 1000px;
  background-color: aqua;
}
<button class='down'>вниз</button>
<div class='divclass'>
  1<br> 11
  <br> 12
  <br> 13
  <br> 14
  <br> 15
  <br> 16
  <br> 17
  <br>
  <button class='down'>еще ниже</button> 18
  <br> 19
  <br> 101
  <br> 102
  <br> 103
  <br> 104
  <br> 105
  <br> 106
  <br> 107
  <br>
  <button class='down'>и еще ниже</button> 108
  <br> 109
  <br> 111
  <br><br> Ниже есть кнопка вверх
</div>
<button class='up'>вверх</button>
<br><br><br><br><br>

Подробнее о методах scrollTo и scrollBy

▲ 0

Если кратко, скролл не работал из-за свойства CSS: overflow-x: hidden, не знаю почему он именно с ним не работал, так как вроде как это свойство убирает горизонтальный скролл, но вот, может будет полезно. Убрав его, поменял свойства и все заработало. Использовать метод window.scrollTo(0, 0).