时间戳

首页 > 解决方案 > 我正在尝试使用反应应用滚动到每个页面的顶部

javascript - 我正在尝试使用反应应用滚动到每个页面的顶部

问题描述

当我导航到项目中的另一个页面时遇到问题。它从大约一半开始，然后滚动到页面顶部。我希望它在页面顶部自动打开，然后能够向下滚动以查看页面的其余部分。这是我当前滚动到顶部的代码：

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

标签： javascriptreactjsscrollreact-routerscrolltop

解决方案

您可以使用 的选项版本来指定滚动行为window.scrollTo。

滚动行为

一个枚举，其值可以是以下之一：

  • 平滑：滚动动画平滑。
  • auto：滚动发生在一次跳转中。
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;
}

推荐阅读