单击链接时，使用的方法“滚动顶部”是否有任何替代方法？答案

【问题标题】：Is there any alternative to the used method 'scroll top' when a link is clicked?单击链接时，使用的方法“滚动顶部”是否有任何替代方法？
【发布时间】：2021-05-04 11:41:16
【问题描述】：

当用户单击将用户引导至新页面的链接时，通常会将用户的视图置于新页面的中间，与原始链接的位置相同。为了防止这种情况，我们可以使用众所周知的方法；从窗口事件向上滚动。

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

谢谢，

【问题讨论】：

reactrouter.com/web/guides/scroll-restoration
我不想看到滚动到顶部的效果。我已经实现了这个方法。我正在寻找与立即从页面顶部开始的新页面相同的效果。谢谢。
我认为这是不可能的。 window.scrollTo({top: 0}); 是即时的。它应该足够快。见stackoverflow.com/a/55926067/2873538
我觉得这种体验很不愉快，即使它很快。我去Airbnb网站模拟点击链接，而不是向上滚动，我们有一个新的页面渲染。例如，使用 node.js 进行服务器端渲染可能是我的问题的解决方案吗？非常感谢您到目前为止的时间和回答。
你应该试试 SSR。这可能会解决问题（如果每个链接的页面都来自服务器）。

标签： reactjs

【解决方案1】：

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

   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 conditional rendering *}
            {isViewTopPage && (
                <Header/>
                <YourChildComponent/>
                <Footer/>
            )}
        </section>
    );
};

注意：由于我的子组件距离顶部视口并没有太低，因此向上滚动非常快。如果您的子组件太低，您可能不是这种情况。您可能需要在向上滚动时实现动画以获得用户体验。

【讨论】：

我想你可以使用this example中的代码。但是，将useEffect 替换为useLayoutEffect，它应该立即进行滚动恢复。