Я пытаюсь прокрутить начало каждой страницы с помощью приложения react

#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;
}