[英]React-Static scroll to top on page change
Is there a way to scroll to the top when the page change with react-static?当页面使用 react-static 更改时,有没有办法滚动到顶部? I'm using
@reach/router
which is include by default with react-static
.我正在使用
@reach/router
,它默认包含在react-static
中。
I've already tried this:我已经尝试过这个:
<Router onChange={window.scrollTo(0,0)}>
<Routes path="*"/>
</Router>
ans this (from this issue ) ans this (from this issue )
<Router history={history} autoScrollToTop={true}>
<Routes path="*"/>
</Router>
but both did not work.但两者都没有工作。
The last solution was mentionned in the react-static doc but seems to be deprecate since it is not longer in the doc. react-static 文档中提到了最后一个解决方案,但似乎已弃用,因为它不再在文档中。
You need to create a new component Scrolltotop.js
您需要创建一个新组件
Scrolltotop.js
import { useEffect } from 'react'
import { useLocation } from '@reach/router'
export default function Scrolltotop () {
const { pathname } = useLocation()
useEffect(() => {
window.scrollTo(0, 0)
}, [pathname])
return null
}
and import it to App.js
并将其导入
App.js
import Scrolltotop from './components/Scrolltotop'
and add it to the App function:并将其添加到应用程序 function:
function App () {
return (
<Root>
<Scrolltotop/>
<Router>
<Routes path="*"/>
</Router>
</Root>
)
}
try having a component that handles the scroll for you and lives above your app component.尝试让一个组件为您处理滚动并位于您的应用程序组件之上。
Usage:用法:
import ManageScroll from './ManageScroll';
ReactDOM.render(<Fragment><ManageScroll/><App/></Fragment>, node);
ManageScroll.js: ManageScroll.js:
import React from "react";
import { Location } from "@reach/router";
let scrollPositions = {};
class ManageScrollImpl extends React.Component {
componentDidMount() {
try {
// session storage will throw for a few reasons
// - user settings
// - in-cognito/private browsing
// - who knows...
let storage = JSON.parse(sessionStorage.getItem("scrollPositions"));
if (storage) {
scrollPositions = JSON.parse(storage) || {};
let { key } = this.props.location;
if (scrollPositions[key]) {
window.scrollTo(0, scrollPositions[key]);
}
}
} catch (e) {}
window.addEventListener("scroll", this.listener);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.listener);
}
componentDidUpdate() {
const { key } = this.props.location;
if (!scrollPositions[key]) {
// never seen this location before
window.scrollTo(0, 0);
} else {
// seen it
window.scrollTo(0, scrollPositions[key]);
}
}
listener = () => {
scrollPositions[this.props.location.key] = window.scrollY;
try {
sessionStorage.setItem(
"scrollPositions",
JSON.stringify(scrollPositions)
);
} catch (e) {}
};
render() {
return null;
}
}
export default () => (
<Location>
{({ location }) => <ManageScrollImpl location={location} />}
</Location>
);
check out this gist for further info https://gist.github.com/ryanflorence/39a37a85254159fd7a5ca54027e175dc查看这个要点了解更多信息
hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.