如何解决我正在尝试使用 react 应用程序滚动到每个页面的顶部
当我导航到项目中的另一个页面时遇到问题。它从大约一半开始,然后滚动到页面顶部。我希望它在页面顶部自动打开,然后能够向下滚动以查看页面的其余部分。这是我当前滚动到顶部的代码:
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;
}
解决方法
您可以使用 window.scrollTo
的 options 版本指定滚动行为。
一个枚举,其值可以是以下之一:
- smooth:滚动动画流畅。
- 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。