#javascript #reactjs #scroll #react-router #scrolltop
#javascript #reactjs #прокрутите #реагировать-маршрутизатор #скроллтоп
Вопрос:
У меня возникает проблема при переходе на другую страницу моего проекта. Он начинается примерно с середины, затем прокручивается до самого верха страницы. Я бы хотел, чтобы он автоматически открывался в верхней части страницы, а затем можно было прокручивать вниз, чтобы просмотреть остальную часть страницы. Это мой текущий код для прокрутки вверх:
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
Ответ №1:
Вы можете указать поведение прокрутки, используя версию параметров window.scrollTo
.
Перечисление, значение которого может быть одним из следующих:
- плавный: прокрутка анимируется плавно.
- авто: прокрутка происходит за один переход.
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo({
left: 0,
top: 0,
behavior: 'auto', // <-- The scrolling happens in a single jump
});
}, [pathname]);
return null;
}