通过Link组件打开新页面时,Next.js中Scroll-to-Top行为不起作用

n53p2ov0  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(150)

在Next.js中,我遇到了一个问题,当我点击一个链接打开一个新页面时,新页面会在与上一页相同的滚动位置打开。例如,如果我在一个产品列表页面上,向下滚动以查看最后一个产品,当我单击该产品时,产品详细信息页面打开,滚动位置仍然在底部。
我希望页面滚动到顶部时,打开产品详细信息页面。如何在Next.js中实现这种滚动到顶部的行为?
以下是我尝试的可能的解决方案

试试1

import { useEffect } from 'react';
import { useRouter } from 'next/router';
const ProductDetails = () => {
    const router = useRouter();
    useEffect(() => {
        const handleRouteChange = () => {
            window.scrollTo(0, 0);
        };

        router.events.on('routeChangeComplete', handleRouteChange);

        return () => {
            router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, [router]);

    return <>
        // product details code goes here
    <>;
};
export default ProductDetails;

试试2

import { useEffect } from 'react';
import { useRouter } from 'next/router';
const ProductDetails = () => {
    const router = useRouter();
    
    useEffect(() => {
        window.scrollTo(0, 0);
    }, [router.pathname]);
  
    return <>
        // product details code goes here
    <>;
};
export default ProductDetails;

尝试3

import { useEffect } from 'react';
import { useRouter } from 'next/router';
const ProductDetails = () => {
    const router = useRouter();
    
    useEffect(() => {
        window.scrollTo(0, 0);
    }, []);
  
    return <>
        // product details code goes here
    <>;
};
export default ProductDetails;

试试4

useEffect(() => {
   // the top id defined on the container of layout which is navbar
   const topElement = document.getElementById("#top");
   topElement?.scrollIntoView({ behavior: "smooth" });
}, [router.pathname]);

上面的解决方案适用于其他路由,但是当涉及到动态路由e.g. /products/product/[slug]时,它不起作用,即使我在useEffect依赖数组中添加slug
注意:也尝试直接进入该组件的代码,我想在顶部的屏幕移动,但仍然没有实现我想要的。
已编辑:添加了支持的代码示例

ttp71kqs

ttp71kqs1#

所以在探索了很多之后,我遇到了一个解决方案,当我看到它时,我笑了。
问题不在Next.js组件上。这是global.css文件中预定义的CSS的问题。
默认情况下,Next.js global.css包含大量CSS。它还为body和HTML标签定义了CSS,如下所示:

html,body {
  max-width: 100vw;
  overflow-x: hidden;
}

html/body标签中删除overflow-x: hidden后,一切都开始正常工作。
所以,我很感谢@divine对另一个Stack Overflow问题的回答,这个问题涉及到同一个问题here is the link to his answer

相关问题