react界面跳转，滚动到顶部

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

很多时候我们需要的是滚动到顶部“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);
        }
}

以上是 react界面跳转，滚动到顶部 的全部内容， 来源链接： utcz.com/z/382205.html

回到顶部