我正在使用下一个/链接,但当我改变路线,滚动到顶部不工作。
<Link href="/some-page" scroll={false}> Go</Link>
我该怎么办?我尝试了太多的方法,但没有结果。
gc0ot86w1#
您的代码使用scroll={false}禁用了滚动到顶部通过文档:Link的默认行为是滚动到页面顶部。当有一个散列定义时,它会滚动到特定的id,就像一个普通的标签一样。为了防止滚动到顶部/散列,可以将scroll={false}添加到链接:删除scroll={false}以解决问题。
scroll={false}
inn6fuwd2#
所以,我用这种方式解决了这个问题:
import { useEffect } from "react"; import { useRouter } from "next/router"; export default function ToTop(){ const router = useRouter(); useEffect(()=>{ const handleRouteChange = () => { document.getElementById('top').scrollIntoView(); } router.events.on('routeChangeComplete', handleRouteChange) },[]); return (''); }
但我不喜欢
ncgqoxb03#
您可以创建此组件并将其导入到要滚动到顶部的页面上。如果你使用的是比NextJS 13更老的版本,那么只需要删除“使用客户端”;.
// scrollToTop "use client"; import { useEffect } from "react"; import React from "react"; export default function scrollToTop() { useEffect(() => { window.scrollTo(0, 0); }, []); return null; }
将其导入到要滚动到顶部的页面上:
// examplePage import React from "react"; import ScrollToTop from "./scrollToTop"; // imported scroll to top const Page = () => { return ( <> <ScrollToTop /> <div>Text...</div> </> ); }; export default Page;
现在,每当您进入或刷新页面时,它总是会滚动到顶部。
3条答案
按热度按时间gc0ot86w1#
您的代码使用
scroll={false}
禁用了滚动到顶部通过文档:
Link的默认行为是滚动到页面顶部。当有一个散列定义时,它会滚动到特定的id,就像一个普通的标签一样。为了防止滚动到顶部/散列,可以将scroll={false}添加到链接:
删除
scroll={false}
以解决问题。inn6fuwd2#
所以,我用这种方式解决了这个问题:
但我不喜欢
ncgqoxb03#
您可以创建此组件并将其导入到要滚动到顶部的页面上。
如果你使用的是比NextJS 13更老的版本,那么只需要删除“使用客户端”;.
将其导入到要滚动到顶部的页面上:
现在,每当您进入或刷新页面时,它总是会滚动到顶部。