如果所有人都想做一些简单的事情，这里有一个解决方案，对每个人都适用

添加这个迷你函数

scrollTop()
{
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
}

从页脚调用函数，如下所示

<a className="scroll-to-top rounded" style={{display: "inline"}} onClick={this.scrollTop}>TOP</a>

如果你想添加漂亮的样式，这里是CSS

.scroll-to-top { 位置:固定; 右:1快速眼动; 底部:1快速眼动; 显示:没有; 宽度:2.75快速眼动; 高度:2.75快速眼动; text-align:中心; 颜色:# fff; 背景:rgba(90,92,105,0.5); 行高:46 px; ｝

useEffect(() => {
    const body = document.querySelector('#root');

    body.scrollIntoView({
        behavior: 'smooth'
    }, 500)

}, []);

这是查看顶部滚动页面的最佳解决方案

或者使用ref来跳转页面

    // a link jump to page react
const ref = useRef(null);

  const handleClick = () => {
    ref.current?.scrollIntoView({behavior: 'smooth'});
  };

 <button onClick={handleClick}>Scroll to element</button>
 <div ref={ref}>Some content here</div>

如果你在手机上这么做，至少在chrome浏览器上，你会在底部看到一个白色的条。

这发生在URL栏消失时。解决方案:

将css的height/min-height: 100%更改为height/min-height: 100vh。

谷歌开发人员文档

这是唯一对我有用的东西(使用ES6类组件):

componentDidMount() {
  ReactDOM.findDOMNode(this).scrollIntoView();
}

以上答案目前对我来说都没用。事实证明，. scrollto并不像. scrollintoview那样广泛兼容。

在App.js中，我们在componentWillMount()中添加了

    this.props.history.listen((location, action) => {
            setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
        })

这是唯一适用于我们的解决方案。 root是我们应用的ID。“平滑”行为并不适用于每个浏览器/设备。777的超时有点保守，但我们在每个页面上都加载了大量数据，所以通过测试，这是必要的。更短的237可能适用于大多数应用程序。

我正在使用React Hooks，想要一些可重用的东西，但也想要一些我可以随时调用的东西(而不是仅仅在渲染之后)。

// utils.js
export const useScrollToTop = (initialScrollState = false) => {
  const [scrollToTop, setScrollToTop] = useState(initialScrollState);

  useEffect(() => {
    if (scrollToTop) {
      setScrollToTop(false);
      try {
        window.scroll({
          top: 0,
          left: 0,
          behavior: 'smooth',
        });
      } catch (error) {
        window.scrollTo(0, 0);
      }
    }
  }, [scrollToTop, setScrollToTop]);

  return setScrollToTop;
};

然后使用钩子你可以做:

import { useScrollToTop } from 'utils';

const MyPage = (props) => {
  // initialise useScrollToTop with true in order to scroll on page load 
  const setScrollToTop = useScrollToTop(true);

  ...

  return <div onClick={() => setScrollToTop(true)}>click me to scroll to top</div>
}