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);
        }
}