javascript - 点击链接后如何跳转到页面顶部？

Question

问题是，每当我导航到 NextJS 中的链接时，它都会转到页面中间。 :

<Link href={`/products/${id}`} key={id}>
   <a>
      {/* other components */}
   </a>
</Link>

所以我认为问题在于链接位于页面中间，因此当我单击链接时，它停留在与您单击链接的位置相同的位置，而不是位于页面顶部。我知道这没有意义。

我尝试添加类似 scroll={true} 的内容, 或 scroll={false}到 <Link> .尝试添加 height: 100%到 CSS 中的 html 和 body .我尝试添加 scroll-behavior: smooth;和其他东西。问题依然存在。

视频如下: https://drive.google.com/file/d/1CCgFCJb1fl9RRYmW5yp41US-0yuSqpfj/view?usp=sharing

临时解决方案:它不使用链接而只使用通常的 <a>标签。因为<Link>在 <a> 时不要让页面重新加载标签在导航到另一个页面时重新加载页面。因此，如果在您单击链接时页面重新加载，那么它总是从顶部开始。

注意:我尝试了以下所有解决方案。

Answer 1

在您的页面组件中，在 useEffect Hook 内，放置 window.scrollTo(0,0)

useEffect(()=>{
  window.scrollTo(0,0);
},[])