react界面跳转，滚动到顶部

在使用react-router-dom时，咱们常常会遇到路由切换时滚动到浏览器顶部的问题。

滚动到顶部 Scroll to top

不少时候咱们须要的是滚动到顶部“Scroll to top”，由于发现好像全部的单页面都有一个通病，就是页面进行跳转时，当前所在的位置和你上个界面所在的位置同样，显然这样对于用户来讲体验不是很好。

 咱们能够使用使用一个<ScrollToTop>组件来帮助咱们每次导航到一个页面的时候，滚动到顶部。确保使用 withRouter包裹它，以传递route的属性props

 

import React, { Component } from 'react';
import {withRouter} from  'react-router-dom'
import 'moment/locale/zh-cn';
class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            window.scrollTo(0, 0);
        }
    }

    render() {
        return this.props.children;
    }
}
export default withRouter(ScrollToTop);

 

在你的app以前，Router以后渲染它

 

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Root from './router/Router';
import * as serviceWorker from './serviceWorker';
import './index.css';
import './static/fonts/iconfont.css';
import ScrollToTop from '../src/models/scrollToTop'
// ReactDOM.render(<Root />, document.getElementById('root'));
ReactDOM.render(
    <BrowserRouter>
        <ScrollToTop>
        <Root />
        </ScrollToTop>
    </BrowserRouter>, document.getElementById('root'));


serviceWorker.unregister();

注：这个方法在页面跳转过程当中很是有用，可是对于那种界面上有分页有很长的界面，每点击跳转一页的时候，界面位置仍是在原来的位置，这个时候咱们能够本身写一个组件，在界面中import backTop from '......'的componentDidMount(){backTop()}中引用就能够了。

export function backTop(){
        var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
            //window.requestAnimationFrame(smoothscroll);
            window.scrollTo (0,0);
        }
}