Question

我正在尝试修复 React 中的滚动问题，其中当我向下滚动到页面上的某个点，然后导航到另一个页面时，该页面将从与上一页相同的滚动点开始。< /p>

这是我尝试过的：

import { useLocation } from 'react-router'

const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation()
  React.useEffect(() => {
    console.log('im scrolling')
    window.scrollTo(0, 0)
  }, [pathname])

  return null
}

export default ScrollToTop

然后像这样导入：

import React from 'react'
import ReactDOM from 'react-dom'

import { BrowserRouter } from 'react-router-dom'

import ScrollToTop from './components/base/ScrollToTop'
import Apps from './App'

ReactDOM.render(
  <BrowserRouter>
    <ScrollToTop />
    <Apps />
  </BrowserRouter>,
  document.getElementById('root'),
)

Im scrolling 正在控制台中打印，但 window.scrollTo 不起作用。
我也尝试了 useLayoutEffect，但同样的结果仍然无法滚动。

Answer 1

尝试抓取 document.documentElement 或其他特定元素而不是 window。

const location = useLocation();
useLayoutEffect(() => {
  document.documentElement.scrollTo(0, 0);
}, [location.pathname]);

相关：react-router scroll to top on every transition

React-router v6 window.scrollTo 不起作用

1 个答案: