Next.js 页面自动滚动到顶部答案

【问题标题】：Next.js page is automatically scrolling to topNext.js 页面自动滚动到顶部
【发布时间】：2023-02-25 14:09:42
【问题描述】：

我正在用 Next.js 做我的第一个项目，我遇到了一个奇怪的行为。我的意思是网页会自动滚动到顶部。此问题仅发生在移动设备上。我有点困惑。以前我有这样的事情：

父组件：

const someRef = useRef<HTMLElement>(null);
return (
    <ChildComponent ref={someRef} />
)

子组件：

const ChildComponent = React.forwardRef((_:unknown, ref: React.LegacyRef<HTMLElement>) => {
    return (
      <div ref={ref} id='someRef'>
          // ...
      </div>
    )
 }
)

目前，我已经删除了所有 refs 并用 React.FC 替换了 forwardRefs，代码如下所示：

父组件：

return (
    <ChildComponent />
)

子组件：

const ChildComponent = () => {
    return (
      <div id='someRef'>
          // ...
      </div>
    )
}

在台式机上一切正常，但正如我所提到的 - 这个问题只发生在手机上。

编辑：这是 Link 元素的样子：

<Link href={`/page1/#about`}>about</Link>

【问题讨论】：

你在页面上向下滚动，什么都不做，它正在滚动到顶部？我认为这与 nextJS 无关，它仅在导航后自动滚动，据我所知nextjs.org/docs/api-reference/next/link。
确切地说，它甚至发生在使用任何链接之前。我在想这可能是由使用 refs/forwardRef 引起的，但删除 refs 没有帮助。更重要的是 - 它是随机发生的。

标签： reactjs typescript next.js

【解决方案1】：

您似乎遇到了 Next.js 问题，网页在移动设备上自动滚动到顶部。这可能是由几个不同的因素引起的，但一个常见的原因是在 Link 元素中使用了哈希符号。

此问题的一种解决方案是从 Link 元素中删除哈希符号，而是使用 scrollIntoView() 方法滚动到所需的元素。以下是如何修改 Link 元素的示例：

<Link href={`/page1`} scroll={true}>about</Link>

然后，在您的子组件中，您可以向要滚动到的元素添加一个 ref：

const someRef = useRef(null);

useEffect(() => {
  if (someRef.current) {
    someRef.current.scrollIntoView({ behavior: 'smooth' });
  }
}, []);

return (
  <div ref={someRef} id='someRef'>
    // ...
  </div>
);

通过在 Link 元素中使用 scroll={true} 并在子组件中使用 scrollIntoView() ，您应该能够避免移动设备上的自动滚动行为。我希望这有帮助！

【讨论】：