Reactjs 使用的方法是否有其他选择'；滚动顶部'；当点击链接时？ P>当用户点击指向新页面的链接时，通常将用户的视图放在新页面的中间，与原始链接的位置相同。为了防止这种情况，我们可以使用众所周知的方法；从窗口事件向上滚动

我想知道是否有任何替代方案或提示可以阻止用户看到滚动。理想情况下，我希望视图像一个新的打开页面一样直接位于顶部

---

谢谢，

在我的案例中，我发现了以下解决方案，其表现就像一个新页面：

   const ParentComponent: React.FC = () => {
    const [isViewTopPage, setViewTopPage] = useState(false);
    
    const scrollToTheTop = () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        let result = window.scrollY === 0;
        setViewTopPage(result);
    };

    useEffect(() => {
    // If the user refresh the page
    if (window.scrollY === 0) {
        setViewTopPage(true);
    }
   // User coming from the link clicked
    if (!isViewTopPage) {
            window.addEventListener('scroll', scrollToTheTop);
        } 
        return () => window.removeEventListener('scroll', 
        scrollToTheTop);
    }, [isViewTopPage]);

    
    return (
        <section id="parent-component">
        {/* Your conditionnal rendering *}
            {isViewTopPage && (
                <Header/>
                <YourChildComponent/>
                <Footer/>
            )}
        </section>
    );
};

constparentcomponent:React.FC=（）=>{
const[isViewTopPage，setViewTopPage]=useState（false）；
常量scrollToTheTop=（）=>{
scrollTo（{top:0，行为：'smooth'}）；
让结果=window.scrollY==0；
setViewTopPage（结果）；
};
useffect（（）=>{
//如果用户刷新页面
如果（window.scrollY==0）{
setViewTopPage（真）；
}
//来自已单击链接的用户
如果（！isViewTopPage）{
window.addEventListener（'scroll'，scroll-tothetop）；
} 
return（）=>window.removeEventListener（'scroll'，
滚动到顶部）；
}，[isViewTopPage]）；
返回(
{/*您的条件呈现*}
{isviewtopage&&(
)}
);
};

---

注意：由于我的子组件与“顶”视口的距离不是太低，因此向上滚动的速度非常快。如果您的子组件太低，则可能不适合您。您可能需要在向上滚动以获得用户体验时实现动画。

我不想看到滚动到顶部的效果。我已经实现了这个方法。我期待有一个新的页面到达，从页面顶部开始立即相同的效果。谢谢。我认为那是不可能的<代码>窗口。滚动到（{top:0}）是即时的。它应该足够快。看，我觉得这种经历很不愉快，即使很快。我去了Airbnb网站模拟点击一个链接，而不是滚动，我们有一个新的页面呈现。例如，使用node.js进行服务器端渲染可能是解决我问题的一个方法？非常感谢您的时间和迄今为止的答案。您应该尝试SSR。这可能会解决问题（如果每个链接的页面都来自服务器）。但是，将

useffect

替换为

useLayoutEffect

，它应该立即执行滚动恢复。